• 2006-11-16

    多图层移动的js代码(兼容ie&ff) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/3847325.html

    昨天做的一个小demo,今天重新调了一次。存档。
    <s c r i p t>
    ie=document.all?true:false;
    i=0;
    bx=0;
    by=0;
    a=1;
    index=0;
    lastobj=null;
    ifmove=false;
    function mynew()
    {
    document.all.mydiv.innerHTML+='<div id=mydiv'+i+' style="position:absolute;top:100;left:100;width:100;height:100;border:1px solid red;color:white;background:#'+a*i+'5'+a*i+'5'+a*i+'5" unselectable="on" onclick="this.style.zIndex=++index;this.innerHTML=\''+i+'<br>level:\'+eval(index)" onmouseover="this.style.cursor=\'pointer\';this.style.border=\'3px solid red\'" onmouseout="mymovestop();this.style.cursor=\'\';this.style.border=\'1px solid red\'">'+i+++'<br>level:0</div>';
    }
    function mymovestart(e)
    {
    obj=ie?event.srcElement:e.target;
    lastobj=obj;
    ifmove=true;
    by=ie?event.clientY:e.clientY;
    bx=ie?event.clientX:e.clientX;
    }
    function mymovestop()
    {
    ifmove=false;
    lastobj=null;
    }
    function mymove(e)
    {
    obj=ie?event.srcElement:e.target;
    if((ifmove)&&(obj==lastobj))
    {
    if(!e)e=event;
    if(parseInt(obj.style.top)+(e.clientY-by)>0)
    obj.style.top=parseInt(obj.style.top)+(e.clientY-by);
    else
    obj.style.top=0;
    if(parseInt(obj.style.left)+(e.clientX-bx)>0)
    obj.style.left=parseInt(obj.style.left)+(e.clientX-bx);
    else
    obj.style.left=0;
    by=e.clientY;
    bx=e.clientX;
    }
    }
    document.onmousedown=mymovestart;
    document.onmouseup=mymovestop;
    document.onmousemove=mymove;
    </s c r i p t>
    <div id=mydiv></div>
    <input type=button value=add o n c l i c k="mynew()">
    分享到: