首页 > 网络编程 > JavaScript > javascript技巧 > 模拟画笔

js模拟画笔效果

2008-10-05 14:48:07 作者：

非常不错的效果，模板画笔，代码相对较少

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
        <title>模拟画笔效果</title> 
        <script language="JavaScript" type="text/javascript"> 
            var ballW = 10,ballH = 10; 
            document.onmousemove = function(evt){ 
                var evt=evt?evt:window.event; 
                var posX=evt.clientX; 
                var posY=evt.clientY; 
                var newDiv=document.createElement("div"); 
                document.body.appendChild(newDiv); 
                newDiv.style.width=ballW+"px"; 
                newDiv.style.height=ballH+"px"; 
                newDiv.style.backgroundColor="red"; 
                newDiv.style.position="absolute"; 
                newDiv.style.left=posX-(ballW/2)+"px"; 
                newDiv.style.top=posY-(ballH/2)+"px"; 
                 
            } 
        </script> 
    </head> 
    <body> 
    </body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

js模拟画笔效果

您可能感兴趣的文章: