<html> <head> <title>可拖动的层</title> <script language="javascript" > //验证是否按下鼠标左键的变量 var down=false; //分别为鼠标x轴y轴,div层坐标x轴y轴 var mX,mY,dX,dY; //当鼠标左键点指定div时触发 function mouseDown() { down=true;//鼠标左键在点住期间,down值为true mX=event.clientX;//获得鼠标坐标,并记录当前坐标给变量 mY=event.clientY;//获得鼠标坐标,并记录当前坐标给变量,以便后面计算 dX=parseInt(div1.style.left);//获得div1(这是层的Id值)的坐标,因为本来是px的字符串,所以要取其中的整数值 dY=parseInt(div1.style.top);//parseInt()就是用来截取整数值的方法 } //鼠标左键松开时触发up事件 function up() { //如果down为true时,因为鼠标左键不按状态下都属于up事件,所以要加上验证 if(down) { down=false;//设置down为false,表示左键没有点住 upDown();//调用下浮效果的方法,使移动停止后会有下沉的效果。如不需要可删除 } } //鼠标在指定区域移动时会触发此事件 function move() { //必先判断鼠标左键已被在指定区域按下 if(down){ //设置该层坐标等于原坐标加上鼠标移动的坐标 div1.style.left=dX+event.clientX-mX; div1.style.top=dY+event.clientY-mY; } } //此变量t控制漂浮效果的次数 var t=0; //此方法用于停止移动时的下沉漂浮效果 function upDown() { if(t==0) { //t等于0时,每10毫秒调用一次本方法,并使t++避免下次再次执行 val=setInterval("upDown()",10); t++; } //获取现在的纵坐标,因为做下沉动作,所以只需在纵坐标上动些手脚 dY=parseInt(div1.style.top); //设置纵坐标,+3px就是离顶部距离增加了3像素,循环增加便成了下沉的效果 div1.style.top=dY+3; //增加一次t+1 t++; //当循环15次之后 if(t==15) { t=0;//t归零 clearInterval(val);//停止之前的每10毫秒调用一次 } } </script> </head> <body onLoad="upDown()" onMouseMove="move()" onMouseUp="up()"> <div id="div1" style="background-color:#BBBBBB; width:200px; height:200px; position:absolute; top:100px; left:200px; border:#6666FF; border:double;"> <div id="title" onMouseDown="mouseDown()" onMouseUp="up()" style="width:200px; height:20px; background-color:#330033; top:70px; left:136px; z-index:200; position: static; font-size:<?xml:namespace prefix = st1 />9pt; color:#FFFFFF; padding-top:5px; padding-left:5px;"> 浮动窗口实例。 </div> <font size="2" color="#6666FF"> <br>这个可以移动的层看起来怎么样?与之前的模式窗口结合起来就可以做一个可以移动的模式窗口了!</font> </div> </body> </html> <!-- 打铁趁热,马上我又写出了能够拖动的层,不但可移动,而且附加了下沉效果。 希望对更多的人有所帮助!
-->
转载于:http://hi.baidu.com/slzs_zyt/blog/item/2a82905187745b1e377abe6a.html |
js鼠标拖动层/层的移动和浮动效果
最新推荐文章于 2019-09-25 22:25:35 发布