JS运动----（3）

来源：互联网发布：平板windows系统怎么样编辑：程序博客网时间：2024/04/30 00:57

3.多物体运动框架

回顾一下上两节的要点，主要讲到了运动框架，十分常见也十分重要。是不是运动很神奇。那么怎么才能让多个物体运动呢？---我们这一节就学习下这个多物体运动框架。

首先先看个小例子：小div变宽变窄的效果；


 <style>
#div1 {width:100px; height:50px; background:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
 var oDiv=document.getElementById('div1');
 
 oDiv.onmouseover=function ()
 {
  startMove(300);
 }
 oDiv.onmouseout=function ()
 {
  startMove(100);
 }
}
var timer=null;
function startMove(iTarget)
{
 var oDiv=document.getElementById('div1'); //容易忘写的地方
 
 clearInterval(timer);
 timer=setInterval(function (){
  var iSpeed=(iTarget-oDiv.offsetWidth)/8;
  iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  
  if(oDiv.offsetWidth==iTarget)//注意是双等号哦；
  {
   clearInterval(timer);
  }
  else
  {
   oDiv.style.width=oDiv.offsetWidth+iSpeed+'px';
  }
 }, 30)
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

思考：如果有多个div让他们运动该怎么办呢？

 <style>
div {width:100px; height:50px; background:red; margin-top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
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)  //obj,哪一个对象或者物体
{
 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)
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

总结： 1：多个物体同时运动
      --例子：多个DIV，鼠标移入变宽【单个定时器存在问题，所以我们每个DIV一个计时器】
      2：多物体运动框架
      --定时器作为物体的属性。
      --参数传递：物体，目标值。
     --例子：多个div淡入淡出。--所以的东西都不能公用。-属性与运动对象绑定：速度，其他属性值（如透明度等）

【思考】既然我们可以给对象添加计时器的属性aDiv[i].timer=null;那么能不能给对象添加其他的属性呢？

看下面的例子，给对象添加alpha属性。

<style>
div {width:100px; height:100px; background:red; margin:10px; filter:alpha(opacity:30); opacity:0.3;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
 var aDiv=document.getElementsByTagName('div');
 var i=0;
 
 for(i=0;i<aDiv.length;i++)
 {
  aDiv[i].alpha=30;
  aDiv[i].onmouseover=function ()
  {
   startMove(this, 100);
  }
  
  aDiv[i].onmouseout=function ()
  {
   startMove(this, 30);
  }
 }
}
//var alpha=30;
function startMove(obj, iTarget)
{
 clearInterval(obj.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);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

 总结：多物体运动的某个属性最好不要共用，因为迟早会出现毛病。

0 0