拖动画html,html的拖拽动画实现方法

我们知道，用html来实现动画的方法有很多，这次教大家如何用JS来实现HTML里的拖拽动画，我们一起看一下案列。>

#p1 {width:100px; height:100px; background:red; position:absolute;}

无标题文档

var oDiv=null;

var disX=0;

var disY=0;

window.οnlοad=function ()

{

oDiv=document.getElementById('p1');

oDiv.οnmοusedοwn=fnDown;

};

function fnDown(ev)

{

var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;

disY=oEvent.clientY-oDiv.offsetTop;

document.οnmοusemοve=fnMove;

document.οnmοuseup=fnUp;

}

function fnMove(ev)

{

var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';

oDiv.style.top=oEvent.clientY-disY+'px';

}

function fnUp()

{

document.οnmοusemοve=null;

document.οnmοuseup=null;

}

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：