运动小宗

运动
透明度：filter:alpha(opacity:30); opacity:0.3;()

想让物体运动：

window.onload=function startmove(){   setInterval 定时器：setInterval(函数，时间间隔) 
      var oDiv=document.getElementById('div1');
      setInterval(function (){
          oDiv.style.left=oDiv.offsetLeft+10+'px';
      },30);
} 

offsetLeft 获取的是相对于父对象的左边距

speed=speed>0?Math.ceil(speed):Math.floor(speed); 向上/下取整

 

1.基础：(匀速运动+透明度    求透明度做法：先设个变量用变量行走最后再把变量赋给opacity)

#div1{filter:alpha(opacity:30); opacity:0.3;}
<script>
var alpha=30;  变量
var timer=null;
function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;
        
        if(alpha<iTarget)
        {
            speed=10;
        }
        else
        {
            speed=-10;
        }
        
        if(alpha==iTarget)
        {
            clearInterval(timer);
        }
        else
        {     
                        oDiv.style.left=oDiv.offsetLeft+speed+'px';
            //透明度：
                        alpha+=speed;
            oDiv.style.filter='alpha(opacity:'+alpha+')';
            oDiv.style.opacity=alpha/100;//
        }
    }, 30);
}
</script>

但是因为是匀速运动 某些情况下并不能准确到达某个位置 document.title=oDiv.offsetLeft;
所以 物体和目标之间的距离<(匀速运动)速度 就算完成了
在人眼无法判断出的前提下最后直接跳到那里就好了 oDiv.style.left=target+'px';

实例 淡入淡出  就上面那个透明度

实例 “分享到”侧边栏：（我的难点在这 ）

#div1{
width:150px; height:200px;position:absolute;background:green;
left:-150px;
/*重点：left:-150px;(150是宽度) 一开始网页这部分都是收在里面的，鼠标碰到才会出来
所以思路就是鼠标未碰：left：-150px; 碰到：left：0px;*/
}

#div1 span{ position:absolute; width:20px; height:60px; 
          line-height:20px; background:blue; right:-20px;top:70px;

  }
oDiv.onmouseover=function(){
        startmove();  iTarget==0px;(left由-150到0)
}
oDiv.onmouseout=function(){
        startmove2(); iTarget==-150px;
}

 

2.缓冲运动（速度逐渐减小 speed=(iTarget-oDiv.offsetLeft)/10）

function startMove(){
        var oDiv=document.getElementById('div1');
        setInterval(function(){
           var speed=(300-oDiv.offsetLeft)/10; //300是目标位置iTarget
                  speed=speed>0?Math.ceil(speed):Math.floor(speed);
           oDiv.style.left=oDiv.offsetLeft+speed+'px';
     },30)
}

实例 悬浮框（在视图右下角） 悬浮框（在视图中间）第16集

多物体运动框架 用自己的东西（obj）
（比如分别变宽变高字变大边框变大）

function getStyle(obj,name){
     if(obj.currentStyle){
         return obj.currentStyle[name];
     }
     else{
         return getComputedStyle(obj,false)[name];
     }
}
function startMove(obj,attr,target){
          clearInterval(obj.timer);
          obj.timer=setInterval(function(){
              var cur=0;
              if(attr=='opacity'){
                    cur=Math.round(parseFloat(getStyle(obj,attr))*100);
              }
              else{
                  cur=parseInt(getStyle(obj,attr));//如果不是透明度，还是普通的‘width’啥的，就还按之前的来
              }
               var speed;
               speed=(target-cur)/6;
               speed=speed>0?Math.ceil(speed):Math.floor(speed);
               if(target==cur){
                   clearInterval(obj.timer);
               }
               else{ 
                   if(attr=='opacity'){
                         obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                         obj.style.opacity=(cur+speed)/100;
                   }
                   else{
                        obj.style[attr]=cur+speed+'px';
                   }
                  
               }
          },30)
}

 

所以一个点：

一、获取非行间样式

类似p.style.height只能获取行内样式

p.offsetHeight当前高度，包含内外边距及边框

获取非行间样式：

function getStyle(obj,name){
 if(obj.currentStyle){
     return obj.currentStyle[name];
 }
 else{
     return getComputedStyle(obj,false)[name];
  }
 }

1.window.getComputedStyle(obj,false)[‘attr’]

该方法有两个参数，第一个是要获取样式的节点对象；第二个可以写成任何的字符一般写成false或者null这里最好是用false；
后面直接跟要获取的样式（写在方括号中）即可。
这个方法的返回值为一个对象，为计算后的样式的属性值对的集合。
比如要获取某个p宽度。那么可以直接写成 var style=getComputedStyle(p,false)[‘width’]; alert(style);

2.nodeObj.currentStyle[‘attr’];

node.currentStyle，该属性返回的也是是一个对象，也是计算后的样式的属性值对的集合。比如要获取某个p宽度。那么可以直接写成
var style=p.currentStyle['width'];
alert(style);

 

链式运动：一个动作做完了接下去做另一个动作

在原有的简易运动框架中再增加一个参数fnEnd,因为在js中可以传任何参数。所以可以传一个函数进去，
但是需要进行判断，如果传进来的fnEnd有内容，就执行fn（）,没有就不执行。

比如：

oDiv.onmouseover=function(){
                    startMove(oDiv,'width',300,function(){
                        startMove(oDiv,'height',300,function(){
                            startMove(oDiv,'opacity',100);
                        });
                   });
           };先变宽再变高透明度再变化

function startMove(obj,attr,target,fnEnd){}