首页 > 其他 > 详细

运动小宗

时间:2019-02-19 20:12:19      阅读:171      评论:0      收藏:0      [点我收藏+]

运动
透明度: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)
}

 

运动小宗

原文:https://www.cnblogs.com/yundong333/p/10403003.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!