JavaScript 动画之拖拽

来源：互联网发布：无锡关键词排名优化编辑：程序博客网时间：2024/05/18 00:35

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style>#div1 {width:100px; height:100px; background:red; position:absolute;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script>var oDiv=null;var disX=0;var disY=0;window.onload=function (){    oDiv=document.getElementById('div1');    oDiv.onmousedown=fnDown;};function fnDown(ev){    var oEvent=ev||event;    disX=oEvent.clientX-oDiv.offsetLeft;    disY=oEvent.clientY-oDiv.offsetTop;    document.onmousemove=fnMove;    document.onmouseup=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.onmousemove=null;    document.onmouseup=null;}</script></head><body><div id="div1"></div></body></html>

参考：JavaScript动画

阅读全文

0 0