您的位置：首页 > Web前端 > JavaScript

拖拽浮动层的效果实现

2007-08-12 19:51 393 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
   <style type="text/css">
#layer1{
position:absolute;
left:200px;
top:200px;
border:#CCCCCC solid 1px;
width:100px;
height:100px;
cursor:pointer;
background-color:#251411;
-moz-user-select:none;
}
</style>
</HEAD>
<script language="JavaScript" type="text/javascript">
window.onload=function(){
drag(document.getElementById("layer1"));
};
function drag(o){
//过滤层中子节点事件
//if(o.firstChild){o.firstChild.onmousedown=function(){return false;};}
o.onselectstart=function() {return(false)};
o.onmousedown=function(e){
e=e||window.event;
var x=e.layerX||e.offsetX;
var y=e.layerY||e.offsetY;
document.onmousemove=function(e){
   e=e||window.event;
   o.style.left=(e.clientX-x)+"px";
   o.style.top=(e.clientY-y)+"px";
};
document.onmouseup=function(){document.onmousemove=null;};
};
}

</script>

<BODY>
<div id="layer1"><a href="http://www.xx.edu.cn">链接</a></div>
<div ><a href="http://www.xx.edu.cn">链接</a></div>
</BODY>
</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： function generator html javascript layer border

相关文章推荐

新的分享

章节导航