JavaScript中的运动和拖拽

对最近一段时间学习JavaScript的整理：

一、div匀速运动：

var timer=null;function startMove(){var oDiv=document.getElementById('div1');clearInterval(timer);//防止重复点击速度加快timer=setInterval(function (){var iSpeed=5;//if...else 防止到达位置后再点击还会运动if(oDiv.offsetLeft>=300)//是否到达终点{clearInterval(timer);//到达终点}else{oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//到达之前}}, 30);}

例1.“分享到”侧边栏：

window.onload=function (){var oDiv=document.getElementById('div1');oDiv.onmouseover=function (){startMove(0);}oDiv.onmouseout=function (){startMove(-100);}}var timer=null;function startMove(iTarget){var oDiv=document.getElementById('div1');clearInterval(timer);timer=setInterval(function (){var iSpeed=0;if(oDiv.offsetLeft<iTarget){iSpeed=10;}else{iSpeed=-10;}if(oDiv.offsetLeft==iTarget){clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';}}, 30);

例2.淡入淡出的图片：

window.onload=function (){var oImg=document.getElementById('img1');oImg.onmouseover=function (){startMove(100);}oImg.onmouseout=function (){startMove(30);}}var timer=null;var alpha=30;function startMove(iTarget){var oImg=document.getElementById('img1');clearInterval(timer);timer=setInterval(function (){var iSpeed=0;if(alpha<iTarget){iSpeed=1;}else{iSpeed=-1;}if(alpha==iTarget){clearInterval(timer);}else{alpha+=iSpeed;oImg.style.filter='alpha(opacity:'+alpha+')';oImg.style.opacity=alpha/100;}}, 30);}

二.缓冲运动

var timer=null;function startMove(iTarget){var oDiv=document.getElementById('div1');clearInterval(timer);timer=setInterval(function (){var iSpeed=(iTarget-oDiv.offsetLeft)/8;//当iSpeed小于1时，oDiv.style.left不会变化。iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);//像素只能是整数，会去掉小数点后面的数。if(oDiv.offsetLeft==iTarget)//是否到达终点{clearInterval(timer);//到达终点}else{oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//到达之前}}, 30);}

例1.上下滑动的侧边栏：

window.onscroll=function (){var oDiv=document.getElementById('div1');var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;startMove(parseInt(t));}var timer=null;function startMove(iTarget){var oDiv=document.getElementById('div1');clearInterval(timer);timer=setInterval(function (){var iSpeed=(iTarget-oDiv.offsetTop)/8;iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);if(oDiv.offsetTop==iTarget){clearInterval(timer);}else{oDiv.style.top=oDiv.offsetTop+iSpeed+'px';}txt1.value=oDiv.offsetTop+',目标：'+iTarget;}, 30);}

三.多个运动：所有东西不能共用，属性与对象绑定。

例1.多个div变宽：

window.onload=function (){var aDiv=document.getElementsByTagName('div');var i=0;for(i=0;i<aDiv.length;i++){aDiv[i].timer=null;//关键是设置多个定时器aDiv[i].onmouseover=function (){startMove(this, 300);}aDiv[i].onmouseout=function (){startMove(this, 100);}}}function startMove(obj, iTarget){clearInterval(obj.timer);obj.timer=setInterval(function (){var iSpeed=(iTarget-obj.offsetWidth)/8;iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);if(obj.offsetWidth==iTarget){clearInterval(obj.timer);}else{obj.style.width=obj.offsetWidth+iSpeed+'px';}}, 30)}

例2.多个div淡入淡出：

window.onload=function (){var aDiv=document.getElementsByTagName('div');var i=0;for(i=0;i<aDiv.length;i++){aDiv[i].alpha=30;//关键alpha不能共用aDiv[i].onmouseover=function (){startMove(this, 100);}aDiv[i].onmouseout=function (){startMove(this, 30);}}}//var alpha=30;function startMove(obj, iTarget){clearInterval(obj.timer);//设置多个定时器，timer属性可以不用声明，不会出错。obj.timer=setInterval(function (){var iSpeed=(iTarget-obj.alpha)/8;iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);if(obj.alpha==iTarget){clearInterval(obj.timer);}else{obj.alpha+=iSpeed;obj.style.filter='alpha(opacity:'+obj.alpha+')';obj.style.opacity=obj.alpha/100;}}, 30);}

offsetwidth注意事项：

1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。
2.offsetWidth属性仅是可读属性，而style.width是可读写的。
3.offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位。
4.style.width仅能返回以style方式定义的内部样式表的width属性值。

//#div1 {width:100px; height:100px; background:red; border:1px solid black;}setInterval(function (){var oDiv=document.getElementById('div1');oDiv.style.width=oDiv.offsetWidth-1+'px';}, 30);

当border：1px时，

offsetWidth为102px,减1后，width变为101，offsetWidth为103px,减1后，width变为102，offsetWidth为104px,减1后，width变为103......width一直增加；

当border：0px时，offsetWidth=width

offsetWidth为100px,减1后，width变为99，offsetWidth为99px,减1后，width变为98，offsetWidth为98px,减1后，width变为97.....width一直减小；

//#div1 {height:100px; background:red; border:1px solid black;}setInterval(function (){var oDiv=document.getElementById('div1');//oDiv.style.width=oDiv.offsetWidth-1+'px';oDiv.style.width=parseInt(oDiv.style.width)-1+'px';}, 30);//<div id="div1" style="width:100px;"></div>

当width为行间样式时，可以使用上述方式，但是style.width只能读取行间样式，不能读取非行间样式。

//#div1 {width:100px; height:100px; background:red; border:1px solid black;function getStyle(obj, attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj, false)[attr];}}setInterval(function (){var oDiv=document.getElementById('div1');//oDiv.style.width=oDiv.offsetWidth-1+'px';oDiv.style.width=parseInt(getStyle(oDiv, 'width'))-1+'px';}, 30);

js不能直接获取样式表中的样式，例如width，left，只能直接获取行内样式，但是现在主流不建议写行内样式，因此我们封装一个可以直接获取非行间样式的函数。getStyle 函数有 2 个参数，第一个参数 obj 为要获取的对象，第二个参数 name 为要获取的属性，并且做了兼容处理，currentStyle 针对 IE 浏览器，getComputedStyle 针对火狐浏览器。

封装函数：

window.onload=function (){var aDiv=document.getElementsByTagName('div');aDiv[0].onclick=function (){startMove(this, 'width', 300);}aDiv[1].onclick=function (){startMove(this, 'height', 200);}aDiv[2].onclick=function (){startMove(this, 'fontSize', 100);}aDiv[3].onclick=function (){startMove(this, 'borderWidth', 50);}}function getStyle(obj, attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj, false)[attr];}}function startMove(obj, attr, iTarget){clearInterval(obj.timer);obj.timer=setInterval(function (){var iCur=parseInt(getStyle(obj, attr));var iSpeed=(iTarget-iCur)/8;iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);if(iCur==iTarget){clearInterval(obj.timer);}else{obj.style[attr]=iCur+iSpeed+'px';}}, 30)}

四.拖拽

例1.有限制范围的拖拽：

window.onload=function (){var oDiv=document.getElementById('div1');oDiv.onmousedown=function (ev){var oEvent=ev||event;var disX=oEvent.clientX-oDiv.offsetLeft;var disY=oEvent.clientY-oDiv.offsetTop;document.onmousemove=function (ev){var oEvent=ev||event;var l=oEvent.clientX-disX;var t=oEvent.clientY-disY;if(l<0){l=0;}else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){l=document.documentElement.clientWidth-oDiv.offsetWidth;}if(t<0){t=0;}else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){t=document.documentElement.clientHeight-oDiv.offsetHeight;}oDiv.style.left=l+'px';oDiv.style.top=t+'px';};document.onmouseup=function (){document.onmousemove=null;document.onmouseup=null;};};};

例2.磁性吸附拖拽：

window.onload=function (){var oDiv=document.getElementById('div1');oDiv.onmousedown=function (ev){var oEvent=ev||event;var disX=oEvent.clientX-oDiv.offsetLeft;var disY=oEvent.clientY-oDiv.offsetTop;document.onmousemove=function (ev){var oEvent=ev||event;var l=oEvent.clientX-disX;var t=oEvent.clientY-disY;if(l<50)//磁性吸附拖拽的关键{l=0;}else if(l>document.documentElement.clientWidth-oDiv.offsetWidth-50){l=document.documentElement.clientWidth-oDiv.offsetWidth;}if(t<50){t=0;}else if(t>document.documentElement.clientHeight-oDiv.offsetHeight-50){t=document.documentElement.clientHeight-oDiv.offsetHeight;}oDiv.style.left=l+'px';oDiv.style.top=t+'px';};document.onmouseup=function (){document.onmousemove=null;document.onmouseup=null;};};};

例3.防止选中其他元素的拖拽：

window.onload=function (){var oDiv=document.getElementById('div1');oDiv.onmousedown=function (ev){var oEvent=ev||event;var disX=oEvent.clientX-oDiv.offsetLeft;var disY=oEvent.clientY-oDiv.offsetTop;if(oDiv.setCapture){oDiv.onmousemove=function (ev){var oEvent=ev||event;oDiv.style.left=oEvent.clientX-disX+'px';oDiv.style.top=oEvent.clientY-disY+'px';};oDiv.onmouseup=function (){oDiv.onmousemove=null;oDiv.onmouseup=null;oDiv.releaseCapture();//IE下防止拖拽选中其他元素};oDiv.setCapture();//IE下防止拖拽选中其他元素}else{document.onmousemove=function (ev){var oEvent=ev||event;oDiv.style.left=oEvent.clientX-disX+'px';oDiv.style.top=oEvent.clientY-disY+'px';};document.onmouseup=function (){document.onmousemove=null;document.onmouseup=null;};}return false;//firefox下防止拖拽时选中其他元素};};

进行合并后：

window.onload=function (){var oDiv=document.getElementById('div1');oDiv.onmousedown=function (ev){var oEvent=ev||event;var disX=oEvent.clientX-oDiv.offsetLeft;var disY=oEvent.clientY-oDiv.offsetTop;if(oDiv.setCapture){oDiv.onmousemove=fnMove;oDiv.onmouseup=fnUp;oDiv.setCapture();}else{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(){this.onmousemove=null;this.onmouseup=null;if(this.releaseCapture){this.releaseCapture();}}return false;};};