JS实现简洁、全兼容的拖动层实例
本文实例讲述了JS实现简洁、全兼容的拖动层。分享给大家供大家参考。具体分析如下：
这是一款最简洁的JS层拖动代码，全兼容ie、ff、opera、safari……每一种浏览器都有对应的判断和实现方法，你只需复制代码到你的网页中就可使用。水平高的朋友可以继续修改，添加更多方法，使其功能更强大。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>JS拖动层</title>
</head>
<body>
<divid="f"style="position:absolute;width:216px;height:138px;
background-color:skyblue;font-size:12px;top:210px;left:180px;
z-index:101;border:solid1pxblue;">
<divid="title"style="background-color:Blue;cursor:move;
height:20px;color:#fff;font-size:12px;padding-top:5px;
padding-left:10px;">层的标题</div>
层的内容
</div>
<scripttype="text/javascript">
varposX;
varposY;
fdiv=document.getElementById("f");
document.getElementById("title").onmousedown=function(e)
{
if(!e)e=window.event;//IE
posX=e.clientX-parseInt(fdiv.style.left);
posY=e.clientY-parseInt(fdiv.style.top);
document.onmousemove=mousemove;
}
document.onmouseup=function()
{
document.onmousemove=null;
}
functionmousemove(ev)
{
if(ev==null)ev=window.event;//IE
fdiv.style.left=(ev.clientX-posX)+"px";
fdiv.style.top=(ev.clientY-posY)+"px";
}
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。