时间:2021-05-26
本文实例总结了javascript关于运动的各种问题。分享给大家供大家参考。具体如下:
一、JS运动的各种问题
问题一:
错误代码:
function startMove(){ var timer=null; var div1=document.getElementById("div1"); if (div1.offsetLeft==300){ clearInterval(timer); }else{ timer=setInterval(function(){ div1.style.left=div1.offsetLeft+10+"px"; },30) } }希望实现的功能:
打开定时器timer,让div1运动到300px,然后让div1停下即关掉定时器。
错误之处:
if语句错误,代码首先设置一个null定时器timer,然后如果div1的左边距为300px,则关掉定时器timer。否则一直运动。但是if并不是循环语句,if语句执行一次之后将不再执行。所以永远不会关闭定时器。
正确代码:
var timer=null; function startMove(){ var div1=document.getElementById("div1"); timer=setInterval(function(){ if (div1.offsetLeft==300){ clearInterval(timer); } div1.style.left=div1.offsetLeft+10+"px"; },30) }问题二:
错误代码:
希望实现的功能:
连续点击开始按钮,div1会加速,这是因为每当点击按钮一次,就会开启一个定时器,累积起来就会加速,所以要在开启定时器之前不管有没有定时器开启都要先关闭一次定时器。但是添加了关闭定时器的clearInterval方法之后,依然会加速。
错误之处:
将timer变量放在了startMove方法里面,相当于每点击一次按钮,就会执行一次startMove方法,生成了一个闭包,因此创建了一个局部timer,每一个闭包当中的timer并不会共享,所以还是相当于生成了点击次数的闭包timer。
正确代码:
var timer=null; function startMove(){ var speed=1; var oDiv1=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ if (oDiv1.offsetLeft>=300){ clearInterval(timer); }else{ oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; } },30) }实现分享栏进出功能:
代码:
实现图片淡入淡出功能:
代码:
注意点:
1.因为在透明度上JavaScript并没有像左边距(offsetLeft)这样的属性。所以用一个alpha变量代替。
2.JavaScript代码中的行间透明度设置上需要考虑浏览器的兼容问题,ie浏览器设置方法为oDiv1.style.filter="aplha(opacity:"+aplha+")";
chrome和火狐为oDiv1.style.opacity=alpha/100。
实现滚动条事件:
代码:
二、JS多物体运动的各种问题
问题一:
希望实现的功能:三个平行div自由的平行缩放。
代码:
注意事项:
多物体运动如果只是设置一个定时器(设置全局定时器)的话,那么三个div共用一个一个全局定时器,那么当一个div没有完成缩小动作的时候另一个div开启定时器执行伸展动作,由于定时器是全局的,那么上一个div的定时器将被覆盖即取消掉,故上一个定时器无法完全地昨晚缩小动作,解决办法是给每一个div设置一个属性timer。
问题二:
希望实现的功能:多图片的淡入淡出。
代码:
希望实现的功能:多物体不同方向的伸缩功能。
代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; margin: 10px; background: yellow; float: left; border: 10px solid black; } </style> <script> window.onload=function(){ var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); oDiv1.timer=null; oDiv2.timer=null; oDiv1.onmouseover=function(){ move(this,400,'height'); }; oDiv1.onmouseout=function(){ move(this,100,'height'); }; oDiv2.onmouseover=function(){ move(this,400,'width'); }; oDiv2.onmouseout=function(){ move(this,100,'width'); }; }; function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } }; function move(obj,iTarget,name){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var cur=parseInt(getStyle(obj,name)); var speed=(iTarget-cur)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget){ clearInterval(obj.timer); }else{ obj.style[name]=cur+speed+"px"; } },30); }; </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>注意事项:
1.offsetwidth所获得的并不只是物体的纯宽度,还有物体的变宽以及外边距。那么在obj.style.width=obj.offsetwidth-1+"px";这句中,本意是希望图片缩小以1px的速度匀速缩小,但是如果将边框的宽度设置为1px而非0px,那么offsetwidth的值其实是obj的width(注意:不是style.width即不是行间的width)+2,上面这句变成了obj.style.width=obj的width+2-1+“px”;图像反而增大了。解决的办法就是不用offsetwidth,而用obj的width。width通过getStyle方法获得。
2.getStyle方法得到的是string。需要用parseint强制转换成数字类型。
完整的运动框架:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 200px; height: 200px; margin: 20px; background: yellow; border: 5px solid black; filter: alpha(opacity:30); opacity: 0.3; } </style> <script> window.onload=function(){ var oDiv1=document.getElementById('div1'); oDiv1.timer=null; oDiv1.onmouseover=function(){ move(this,100,'opacity'); }; oDiv1.onmouseout=function(){ move(this,30,'opacity'); }; }; function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } }; function move(obj,iTarget,name){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var cur=0; if(name=='opacity'){ cur=Math.round(parseFloat(getStyle(obj,name))*100); }else{ cur=parseInt(getStyle(obj,name)); } var speed=(iTarget-cur)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget){ clearInterval(obj.timer); }else{ if(name=='opacity'){ obj.style.opacity=(cur+speed)/100; obj.style.filter='alpha(opacity:'+cur+speed+')'; }else{ obj.style[name]=cur+speed+"px"; } } },30); }; </script> </head> <body> <div id="div1"></div> </body> </html>希望本文所述对大家的javascript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
今天回答了一个关于Javascript的问题,涉及到了赋值问题,因此想把这个问题好好总结下。复制代码代码如下:vara='test';varb=
前面的话在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动。但是,如果用canvas去实现,却是另一种思路。本文将详细介绍canvas动态
之前总结了一下关于jquery如何判断复选框是否选中的问题,今天总结如何判断js复选框是否选中javascript判断复选框是否选中,下面通过例子来说明(现在有
昨天出去前端面试又失败,期间问了个有关于数组对象的问题,下面就这类问题总结下JavaScript常用的数组操作方法。一、何为数组(Array)对象数组对象是使用
本文实例总结了javascript运动效果实现与用法。分享给大家供大家参考,具体如下:一、图片放大缩小效果:图片放大缩小*{margin:0;padding:0