服务器与运维

当前位置:澳门新莆京娱乐官网 > 服务器与运维 > 变速运动的方法_基础知识_脚本之家【葡京app投注】

变速运动的方法_基础知识_脚本之家【葡京app投注】

来源:http://www.drgigabytes.com 作者:澳门新莆京娱乐官网 时间:2019-12-28 22:22

实例1——控制一个对象的匀速移动和停止HTML:复制代码 代码如下:

葡京app投注 1

JS:实现向右运动复制代码 代码如下:var timer=null; window.onload=function(){ var odiv=document.getElementById; var obtn=document.getElementById; clearInterval; //作用见要点① obtn.onclick=function(){ timer=setInterval{ var speed=10; if{ //判断对象边距 到达指定位移则关闭定时器 clearInterval; }else{ odiv.style.left=odiv.offsetLeft+speed+'px'; } },30); } }要点:①if语句的条件不能用“==”运算符,如上述代码,当speed的值为基数如7时,不断增加的左边距不会出现300px值,而是到达294后直接跳到301,导致条件失效,无法停止。②使用else语句是防止停止移动后,每点击一次按钮,div任会移动一个speed。③在定时器之前,先关闭一下定时器,防止连续点击按钮时,同时打开多个定时器,使移动速度叠加后更快。

封装:复制代码 代码如下://object:要移动的对象id itarget:水平位移位置 var timer=null; function moveto{ var obj=document.getElementById; clearInterval; timer=setInterval{ var speed=0; if(obj.offsetLeft实例2——修改上述封装的函数moveto(),使该对象变速停止

JS:复制代码 代码如下:var timer=null; function moveto{ var obj=document.getElementById; clearInterval; timer=setInterval{ var speed=0; if(obj.offsetLeft0?Math.ceil:Math.floor;//取整,解决最后不足1px的位移量被忽略的问题 if(obj.offsetLeft==itarget){ clearInterval; }else{ obj.style.left=obj.offsetLeft+speed+'px'; }; document.title=obj.offsetLeft; },30); }要点:①通过递减speed值,实现变速。②移动到最后,当像素小于1px时,小于1px的几个值不会被添加到对象left中,而是被忽略,所以最终位移量比设定的水平位移位置itarget要少几个像素。解决的办法是进行取整:正数向上取整ceil。

扩展:垂直位移的原理和水平位移的相同。

补充1:解决speed与itarget不能整除,导致对象不能精确到达itarget位置,而是在其左右抖动问题:复制代码 代码如下:var timer=null; function moveto{ var obj=document.getElementById; clearInterval; timer=setInterval{ var speed=0; if(obj.offsetLeft<=itarget){ speed=7; }else{ speed=-7; }//设置对象在离目标位置itarget的距离小于speed时,停止运动,同时设置对象的left直接移动到itarget的位置。 if(Math.abs(itarget-obj.offsetLeft<=speed)){ clearInterval; obj.style.left=itarget+'px'; }else{ obj.style.left=obj.offsetLeft+speed+'px'; }; document.title=obj.offsetLeft; },30); }补充2:

offset的Bug:例如offsetWidth,它包含的不只是width,还包含padding和border。当给对象设置了填充或边框时,再将offsetWidth赋值给对象时,就会运动就会有差异。解决:不用offset,而是通过创建一个兼容IE和FF的函数,获取元素的width属性值,来代替offsetWidth。该函数如下:getAttr()复制代码 代码如下:function getAttr{ var obj=document.getElementById; if{ return obj.currentStyle[葡京app投注 ,attrName]; //兼容IE }else{ return getComputedStyle[attrName]; //兼容FF } }

本文由澳门新莆京娱乐官网发布于服务器与运维,转载请注明出处:变速运动的方法_基础知识_脚本之家【葡京app投注】

关键词: