javascript关于运动的各种问题经典总结


Posted in Javascript onApril 27, 2015

本文实例总结了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) 
}

问题二:
错误代码:

function startMove(){ 
 var speed=1; 
 var timer=null; 
 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) 
}

希望实现的功能:

连续点击开始按钮,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) 
}

实现分享栏进出功能:
代码:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style type="text/css"> 
  #div1{ 
   width: 150px; 
   height: 200px; 
   background: burlywood; 
   position: absolute; 
   left: -150px; 
  } 
  span{ 
   width: 20px; 
   height: 60px; 
   position: absolute; 
   background: gold; 
   right: -20px; 
   top: 70px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv1=document.getElementById("div1"); 
   oDiv1.onmouseover=function(){ 
    move(0); 
   }; 
   oDiv1.onmouseout=function(){ 
    move(-150); 
   }; 
  }; 
  var timer=null; 
  function move(target){ 
   var oDiv1=document.getElementById("div1"); 
   var speed=0; 
   if (oDiv1.offsetLeft<target){ 
    speed=10; 
   }else{ 
    speed=-10; 
   } 
   clearInterval(timer); 
   timer=setInterval(function(){ 
    if(oDiv1.offsetLeft==target){ 
     clearInterval(timer); 
    }else{ 
     oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; 
    } 
   },30); 
  } 
 </script> 
</head> 
<body> 
<div id="div1"> 
 <span id="span1">分享到</span> 
</div> 
</body> 
</html>

实现图片淡入淡出功能:
代码:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  #div1{ 
   width: 200px; 
   height: 200px; 
   background: red; 
   position: absolute; 
   filter: alpha(opacity:30); 
   opacity: 0.3; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv1=document.getElementById("div1"); 
   oDiv1.onmouseover=function(){ 
    move(100); 
   }; 
   oDiv1.onmouseout=function(){ 
    move(30); 
   }; 
  }; 
  var timer=null; 
  var alpha=30; 
  function move(target){ 
   var oDiv1=document.getElementById("div1"); 
   var speed=0; 
   clearInterval(timer); 
   if(alpha<target){ 
    speed=10; 
   }else{ 
    speed=-10; 
   } 
   timer=setInterval(function(){ 
    if (alpha==target){ 
     clearInterval(timer); 
    }else{ 
     alpha+=speed; 
     oDiv1.style.filter="alpha(opacity:"+alpha+")"; 
     oDiv1.style.opacity=alpha/100; 
    } 
   },30); 
  }; 
 </script> 
</head> 
<body> 
<div id="div1"> 
</div> 
</body> 
</html>

注意点:

1.因为在透明度上JavaScript并没有像左边距(offsetLeft)这样的属性。所以用一个alpha变量代替。
2.JavaScript代码中的行间透明度设置上需要考虑浏览器的兼容问题,ie浏览器设置方法为oDiv1.style.filter="aplha(opacity:"+aplha+")";
  chrome和火狐为oDiv1.style.opacity=alpha/100。
实现滚动条事件:
代码:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style type="text/css"> 
  #div1{ 
   width: 100px; 
   height: 100px; 
   background: yellowgreen; 
   position: absolute; 
   bottom: 0px; 
   right: 0px; 
  } 
 </style> 
 <script> 
  window.onscroll=function(){ 
   var oDiv=document.getElementById("div1"); 
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 
   move(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop); 
  }; 
  var timer=null; 
  function move(target){ 
   var oDiv=document.getElementById("div1"); 
   clearInterval(timer); 
   timer=setInterval(function(){ 
    var speed=(target-oDiv.offsetTop)/10; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if (oDiv.offsetTop==target){ 
     clearInterval(timer); 
    }else{ 
     oDiv.style.top=oDiv.offsetTop+speed+'px'; 
    } 
   },30) 
  }; 
 </script> 
</head> 
<body style="height:2000px;"> 
<div id="div1"></div> 
</body> 
</html>

二、JS多物体运动的各种问题

问题一:

希望实现的功能:三个平行div自由的平行缩放。
代码:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  div{ 
   width: 100px; 
   height: 50px; 
   background: yellow; 
   margin: 10px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv=document.getElementsByTagName('div'); 
   for (var i=0;i<oDiv.length;i++){ 
    oDiv[i].timer=null; 
    oDiv[i].onmouseover=function(){ 
     move(300,this); 
    }; 
    oDiv[i].onmouseout=function(){ 
     move(100,this); 
    }; 
   } 
  }; 
  function move(iTarget,oDiv){ 
   clearInterval(oDiv.timer); 
   oDiv.timer=setInterval(function(){ 
    var speed=(iTarget-oDiv.offsetWidth)/5; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if (iTarget==oDiv.offsetWidth){ 
     clearInterval(oDiv.timer); 
    }else{ 
     oDiv.style.width=oDiv.offsetWidth+speed+"px"; 
    } 
   },30); 
  } 
 </script> 
</head> 
<body> 
<div id="div1"></div> 
<div id="div2"></div> 
<div id="div3"></div> 
</body> 
</html>

注意事项:

多物体运动如果只是设置一个定时器(设置全局定时器)的话,那么三个div共用一个一个全局定时器,那么当一个div没有完成缩小动作的时候另一个div开启定时器执行伸展动作,由于定时器是全局的,那么上一个div的定时器将被覆盖即取消掉,故上一个定时器无法完全地昨晚缩小动作,解决办法是给每一个div设置一个属性timer。

问题二:

希望实现的功能:多图片的淡入淡出。
代码:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  div{ 
   width: 200px; 
   height: 200px; 
   margin: 10px; 
   background: yellow; 
   float: left; 
   filter: alpha(opacity:30); 
   opacity: 0.3; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv=document.getElementsByTagName('div'); 
   for(var i=0;i<oDiv.length;i++){ 
    oDiv[i].timer=null; 
    oDiv[i].alpha=30; 
    oDiv[i].onmouseover=function(){ 
     move(100,this); 
    }; 
    oDiv[i].onmouseout=function(){ 
     move(30,this); 
    }; 
   } 
  }; 
  function move(iTarget,obj){ 
   clearInterval(obj.timer); 
   obj.timer=setInterval(function(){ 
    var speed=(iTarget-obj.alpha)/30; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if (obj.alpha==iTarget){ 
     clearInterval(obj.timer); 
    }else{ 
     obj.alpha+=speed; 
     obj.style.filter="alpha(opacity:"+obj.alpha+")"; 
     obj.style.opacity=obj.alpha/100; 
    } 
   },30); 
  } 
 </script> 
</head> 
<body> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
</body> 
</html>

希望实现的功能:多物体不同方向的伸缩功能。

代码:

<!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程序设计有所帮助。

Javascript 相关文章推荐
js取滚动条的尺寸的函数代码
Nov 30 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 #Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 #Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 #Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 #Javascript
jquery实现标签上移、下移、置顶
Apr 26 #Javascript
jquery ui resize 中border-box的bug修正
Apr 26 #Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 #Javascript
You might like
php实现memcache缓存示例讲解
2013/12/04 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
用Python创建声明性迷你语言的教程
2015/04/13 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
python多线程抽象编程模型详解
2019/03/20 Python
python操作文件的参数整理
2019/06/11 Python
Django实现发送邮件功能
2019/07/18 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
公司业务员岗位职责
2014/03/18 职场文书
大学生应聘求职信
2014/05/26 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
开票证明
2015/06/23 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers