首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

div 拖沓效果

2012-10-25 
div 拖拉效果script typetext/javascript/*分析:整个过程分三步走,分别是:获取对象,移动对象,释放对

div 拖拉效果
<script type="text/javascript">

   /*分析:整个过程分三步走,分别是:获取对象,移动对象,释放对象

     这三个步骤用鼠标的事件来对应是:onmousedown,onmousemove,onmouseup

   */
    var x,y,z,down=false,obj;
    function init(){
        obj=event.srcElement;       //获取焦点对象
        obj.setCapture();              //设置鼠标捕捉
        z=obj.style.zIndex;           //取得原z轴位置
        obj.style.zIndex=100;       //设定在最上层
        x=event.offsetX;              //获取鼠标指针相对于触发事件的对象的x位置
        y=event.offsetY;              //获取鼠标指针相对于触发事件的对象的y位置
        down=true;                     //设置鼠标状态为按下状态
    }
    function move(){
        if(down&&event.srcElement==obj){
            with(obj.style){
                posLeft=document.body.scrollLeft+event.x-x;
                posTop=document.body.scrollTop+event.y-y;
            }
        }
    }
    function up(){
        down=false;
        obj.style.zIndex=z;
        obj.releaseCapture();
    }
function test(){
var t = document.getElementById("1");
t.style.display = "block";
}
  </script>

 
<div id="1" onmousedown="init()" onmousemove="move()" onmouseup="up()" style="display:none;position:absolute;top:100px;left:100px;
width:100px;height:150px;border:1px solid #ccc;background:red;z-index:1">div1
<input type="button" value="click" onclick="test();"/>
</div>
<div id="2" onmousedown="init()" onmousemove="move()" onmouseup="up()" style="position: absolute;top:150px;left:150px;
width:100px;height:150px;border:1px solid #666;background:blue;z-index:2">div2</div>
<div id="3" onmousedown="init()" onmousemove="move()" onmouseup="up()" style="position: absolute;top:200px;left:200px;
width:100px;height:150px;border:1px solid #999;background:green;z-index:3;">div3</div>
<input type="button" value="click" onclick="test();"/>

热点排行