JS运动----（4）

【ps】多物体运动框架现在比较的成熟，但是还是不够完善，等学完任意值的运动框架自然会明白。

4 任意值运动框架

  1：记住：不要随意用offsetwidth一系列值。用currentStyle代替offset
  2：计算机对小数的处理很弱的，要避免使用小数。对小数是模拟的
  3：原有运动框架的问题-只能让某个值运动起来---如果想让其他值运动起来，要修改程序。
  4：扩展的运动框架--运动属性作为参数----封装opacity---小数问题
下面具体分析原因。

<style>
#div1 {width:100px; height:100px; background:red; }
</style>

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

<script type="text/javascript">
setInterval(function (){
 var oDiv=document.getElementById('div1');
 
 oDiv.style.width=oDiv.style.width-1+'px';
}, 30);
</script>
      
对比上面的例子是不是很神奇？为什么第二个只加了边框就变化呢？
 
其实是offsetWidth的原因，offsetWidth包括边框和width padding margin；那么这个问题怎么解决。
首先怎么取得纯净的非行间样式width呢？----如何取得非行间的样式呢？
如果你看过前面的内容，就会知道这个函数
 function getStyle(obj, attr)
{
 if(obj.currentStyle)
 {
  return obj.currentStyle[attr];
 }
 else
 {
  return getComputedStyle(obj, false)[attr];
 }
}
如何取非行间的样式：【IE】currentStyle()//获取计算后的样式【**兼容性有问题】
 
【FF】：getComputerStyle(a,false);//后续版本省掉false，虚元素。利用if else设置兼容
//第一个封装的函数，获取非行间样式，注意background等符合样式，并且会自动取出来系统默认的样式。
function(obj,attr){
          if(obj.currentStyle)
{
       return  obj.currentStyle[attr]; //这个时候是取attr这个变量传递的属性obj.currentStyle.attr是获取已经存在的样式，但是没有attr这样子的样式，错误的写法。
 }
        else{ 
              return getComputedStyle(obj,false)[attr];
             }
       }
style:只能取行间的样式
接下来，问题自然就会解决。
 <style>
#div1 {width:100px; height:100px; background:red; border:1px solid black;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
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);
</script>

【ps】--真正工作的时候千万不要随意用offsetWidth系列的东西，因为很不靠谱。前面一直使用时因为这个比较方便。

 多物体运动框架出场

 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=0;
  
  if(attr=='opacity')
  {
   iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
//思考：此处为什么要用parseInt
  }
  else
  {
   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
  {
   if(attr=='opacity')
   {
    obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
    obj.style.opacity=(iCur+iSpeed)/100;
   }
   else
   {
    obj.style[attr]=iCur+iSpeed+'px';
   }
  }
 }, 30)
}

 思考分析：如果外面在不加parseInt,当鼠标移动的很快的时候你就会看到透明度图片一直在闪烁。为什么会这样子呢？其实这是因为计算机内部是模拟的存贮小数，所以写程序的时候应该尽量避免小数。

 eg:alert(3=3.00000000000000000000000001);------>true;