js鼠标拖动层/层的移动和浮动效果

<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>

<!--

打铁趁热,马上我又写出了能够拖动的层,不但可移动,而且附加了下沉效果。

                                           希望对更多的人有所帮助!                        


注意:适合IE浏览器,若是其他浏览器没有event,需加一些特殊的处理,在此不多说明咯。     

-->


转载于:http://hi.baidu.com/slzs_zyt/blog/item/2a82905187745b1e377abe6a.html


阅读更多
换一批

没有更多推荐了,返回首页