学习DIV+JS网页拖动层的好实例_层和布局特效

学习DIV+JS网页拖动层的好实例，因为本段代码演示了如何编写一个自动还原与不还原的拖动层，也就是有的拖动层鼠标移动后可以回到原始的位置，而有的则是随着鼠标移到哪就是哪儿，这两种拖动方法本段代码都向你很好的展示了，因些，对学习非常有帮助。

<html>
<head>
<title>学习网页拖动层的好实例</title>
<meta http-equiv="mrc-Type" mrc="text/html;charset=gb2312">
<style type="text/css">
*{padding:0px auto;margin:0px auto;}
body{font-size:12px;font-family:宋体;}
.a1{width:135px;height:100px;border:1px solid red;float:left;background:lightgreen;margin:5px;padding:5px;}
.a2{width:135px;height:100px;border:1px solid red;float:right;background:lightgreen;margin:5px;padding:5px;}
</style>
<script language="javascript">
function tuo(){
var objthis=this;
this.x=null;
this.y=null;
this.xx=null;
this.yy=null;
this.xxx=null;
this.yyy=null;
this.obja=null;
this.co=null;
this.t=null;
document.onmousemove=function(){
   try{objthis.x=arguments[0].screenX;objthis.y=arguments[0].screenY;}
   catch(err){objthis.x=window.event.x;objthis.y=window.event.y;}
   }
}
tuo.prototype.create=function(a,b){
if(this.obja==null){
this.co=b;
var objthis=this;
this.obja=a;
this.obja.onmouseup=function(){objthis.up()}
this.xx=this.x;
this.yy=this.y;
this.xxx=this.obja.offsetLeft;
this.yyy=this.obja.offsetTop;
this.obja.style.position="absolute";
this.move();
}
}
tuo.prototype.move=function(){
var objthis=this;
var x=this.xxx + this.x - this.xx;
var y=this.yyy + this.y - this.yy;
this.obja.style.left = x + "px";
this.obja.style.top = y + "px";
this.t=setTimeout(function(){objthis.move()},1)
}
tuo.prototype.up=function(){
clearTimeout(this.t)
if(this.co==1){
this.obja.style.left = this.xxx + "px";
this.obja.style.top = this.yyy + "px";
}
this.xxx=null;
this.yyy=null;
this.obja=null;
}
var cc1=new tuo();
</script>
</head>
<body>

<div class="a1" onmousedown="cc1.create(this,1)">自动还原到原处</div>
<div class="a2" onmousedown="cc1.create(this)">不还原，拖到哪是哪</div>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-12-03

[收藏][报错][返回列表]

学习DIV+JS网页拖动层的好实例_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些