为了账号安全,请及时绑定邮箱和手机立即绑定

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 照着老师的代码打,发现有个问题,就是flag没有定义在定时器内。因为flag如果定义在定期器外,flag只执行了一遍,当循环了一次后,flag变成了false就不会再改变了。flag一直都是false,就无法关闭定时器和执行下一个函数了。 结论:flag要定义在定期器内(旗子要立好!!)求赞! 时间: 2016-04-04
    查看全部
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>淘宝js运动</title>
        <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
    
        #move {
            width: 240px;
            margin: 10px auto;
            background-color: #f5f4f4;
            border: 1px solid #ccc;
            overflow: hidden;
        }
    
        #move a {
            float: left;
            display: inline-block;
            width: 58px;
            height: 25px;
            border: 1px solid #ddd;
            border-radius: 3px;
            background: #fff;
            text-align: center;
            margin: 10px 10px;
            position: relative;
            padding-top: 40px;
            color: #9c9c9c;
            font-size: 12px;
            text-decoration: none;
            line-height: 25px;
            overflow: hidden;
        }
    
        #move a i {
            position: absolute;
            top: 20px;
            left: 0;
            display: inline-block;
            width: 100%;
            text-align: center;
            opacity: 1;
            filter: alpha(opacity=100);
        }
    
        #move a:hover {
            color: #f00;
        }
    
        #move img {
            border: none;
        }
        </style>
        <script type="text/javascript" src="../move.js"></script>
        <script>
            window.onload=function(){
                var oMove=document.getElementById('move'),
                    aList=oMove.getElementsByTagName('a');
    
                for(var i=0;i<aList.length;i++){
                    //onmouseenter不会影响子元素,不会引发事件冒泡
                    aList[i].onmouseenter=function(){
                        var _this=this.getElementsByTagName('i')[0];
                        startMove(_this,{top:-25,opacity:0},function(){
                            _this.style.top=30+'px';
                            startMove(_this,{top:20,opacity:100});
                        });
                    }
                }
            }
        </script>
    </head>
    
    <body>
        <div id='move'>
            <a href='#'><i><img src="images/tickets.png"></i><p>彩票</p></a>
            <a href='#'><i><img src="images/film.png"></i><p>电影</p></a>
            <a href='#'><i><img src="images/fork.png"></i><p>外卖</p></a>
            <a href='#'><i><img src="images/fly.png"></i><p>缴费</p></a>
            <a href='#'><i><img src="images/game.png"></i><p>游戏</p></a>
            <a href='#'><i><img src="images/protection.png"></i><p>理财</p></a>
        </div>
    </body>
    //完美运动框架
    
    //获取css属性
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            //针对IE8获取元素某项css属性
            return obj.currentStyle[attr];
        } else {
            //针对其他浏览器,false为伪类选项
            return getComputedStyle(obj, false)[attr];
        }
    }
    
    //若传入fn(用于函数回调)执行链式运动
    //startMove(obj,{attr1,iTarget1,attr2,iTarget2}, fn)
    function startMove(obj, json, fn) {
    
        clearInterval(obj.timer);
    
        obj.timer = setInterval(function() {
            var flag = true; //每次循环初始化flag值,否则flag无法为true,定时器无法真正结束
            //for()in遍历循环,将json中以attr属性循环,json[attr]为它的对应值
            for (var attr in json) {
                //1.取当前值
                var iCur = 0;//初始化
                if (attr == 'opacity') {
                    iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                } else {
                    iCur = parseInt(getStyle(obj, attr));
                }
    
                //2.算速度
                var speed = (json[attr] - iCur) / 5;
                //speed类整数变量需要判断取整
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                //3.检测停止
                //只要有一个运动目标没有完成,则flag为false,未完成运动继续执行
                //已达到的运动目标会因为speed最终等于0而“停止”,没有实际停止定时器
                if (iCur != json[attr]) {
                    flag = false;
                }
                if (attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity:' + (iCur + speed) + ')';
                    obj.style.opacity = (iCur + speed) / 100;
                } else {
                    //用style[]追加变量,因为attr传入的是字符所以不能用style.xxx
                    obj.style[attr] = iCur + speed + 'px';
                }
            }
            //如果flag成立,即所有运动目标完成,则停止定时器,判断是否有回调函数存在
            if (flag) {
                clearInterval(obj.timer);
                if (fn) {
                    //为了不让fn()在回调时指向window,用call()改变this指向
                    //var that=this也可以
                    fn.call(obj);
                }
            }
        }, 10)//时间间隔,变更达到增减动画速度
    }


    查看全部
    10 采集 收起 来源:JS动画案例

    2018-06-09

  • //最终封装的'完美移动框架' function startMove(obj,json,fn){ var flag=true;//标志所有运动是否到达目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var curr=0; //判断是否为透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } //移动速度处理 var speed=0; speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[attr]){ flag=false; } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fu(); } } },30); } //取样式 function getStyle(obj,attr){ if(obj.currentStyle){//IE取样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
    查看全部
  • Ps1:opacity:所有浏览器都支持 opacity 属性。<br> 注释:IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。<br> <br> Ps2:缓冲运动的速度值一定要转换成整数,不然将到达不了终点,是用Math.ceil(),还是Math.floor(),要看就提情况。 Math.floor();向下取整 Math.ceil();向上取整 由于数值设置的原因,div移动到一定px后,进行相减再除20的运算后会出现小数,比如0.75,比如这时div移动到了290,程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,而浏览器是不允许出现小数的,会把0.75去掉,那么div的left就成了290,下次执行时div的left是290,算出来速度还是0.75,浏览器又省略了小数,结果就是div停在了290px,到不了目标点300。
    查看全部
    7 采集 收起 来源:JS缓冲动画

    2018-03-22

  • 匀速运动:<br> 1、设置定时器,每隔一段时间更改位置,达到匀速运动<br> 2、设置定时器前需清除定时器,以防多次触发重复生成多个定时器<br> 3、当运动位置达到目标值时,可通过清除定时器停止运动<br> 4、当定义函数多处相同时,可封装为一个函数,用不同参数调用,尽量少传递相同的参数<br> <script type="text/javascript"> window.onload=function(){ var oDiv1=document.getElementById('div1'); oDiv1.onmouseover=function(){ starMove(0); }; oDiv1.onmouseout=function(){ starMove(-200); }; }; //匀速运动 var timer1=null; speed=0; function starMove(iTarget){ var oDiv1=document.getElementById('div1'); clearInterval(timer1); timer1=setInterval(function(){ if(oDiv1.offsetLeft==iTarget){ clearInterval(timer1); }else{ if(iTarget<0){ speed=-10; }else{ speed=10; } oDiv1.style.left=oDiv1.offsetLeft+speed+'px'; } },30); }
    查看全部
    5 采集 收起 来源:JS速度动画

    2018-03-22

  • //之前老师的代码有一个小bug,解决后的代码 function getStyle(obj,attr){ if(obj.currentStyle){ //IE return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } //json = {attr1:iTarget1,attr2:iTarget2} function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var flag = true; //标志所有运动是否到达目标值 for(var attr in json){ //取当前值 var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); } else { icur = parseInt(getStyle(obj,attr)); } //求速度 var speed = (json[attr]-icur)/8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(icur != json[attr]){ flag = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; //IE obj.style.opacity = (icur+speed)/100; } else { obj.style[attr] = icur + speed +'px'; } if(flag) { clearInterval(obj.timer); flag = true; if(fn){ fn(); } } } },20); }
    查看全部
    5 采集 收起 来源:JS动画案例

    2018-03-22

  • //最终封装的'完美移动框架' function startMove(obj,json,fn){ var flag=true;//标志所有运动是否到达目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var curr=0; //判断是否为透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } //移动速度处理 var speed=0; speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[attr]){ flag=false; } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fu(); } } },30); } //取样式 function getStyle(obj,attr){ if(obj.currentStyle){//IE取样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
    查看全部
  • <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>分享</title>

    <style type="text/css">

    *{

    padding: 0;

    margin: 0;

    }

    #div1{

    width: 200px;

    height: 200px;

    background-color: red;

    position: relative;

    left: -200px;

    top: 0;

    }

    #div1 span{

    width: 20px;

    height: 50px;

    background-color: blue;

    position:absolute;

    left: 200px;

    top: 75px;

    }

    </style>

    <script type="text/javascript">

    window.onload=function(){

    var oDiv=document.getElementById("div1");//oDiv是局部变量,只在此函数内有效

    //鼠标移入事件

    oDiv.onmouseover=function(){

    starMove(0);

    }

    //鼠标移出事件

    oDiv.onmouseout=function(){

    starMove(-200);

    }

    var timer = null;

    function starMove(target){

    clearInterval(timer);//解决“speed”的叠加问题

    var oDiv=document.getElementById("div1");

    //创建一个定时器timer

    timer=setInterval(function(){

    var speed =0;

    if(oDiv.offsetLeft > target){

    speed = -10;

    }else{

    speed = 10;

    }

    if(oDiv.offsetLeft==target){

    clearIntral(timer);//符合条件运动停止

    }else{

    oDiv.style.left=oDiv.offsetLeft+speed+'px';

    }

    },30);

    }

    }

    </script>

    </head>

    <body>

    <div id = div1>

    <span>分享</span>

    </div>

    </body>

    </html>


    查看全部
    5 采集 收起 来源:JS速度动画

    2018-04-10

  • 在这里会出现两个BUG。我都完美的解决了。不要像别人说的那么繁琐。第一个肯定是不能执行回调涵数。只要把flag=true放到定时器下面。 第个就是当鼠标移动的时候会出现多次执行涵数,只要鼠标小小的动一下就会执行动画。只要把onmouseover 改成onmouseenter就可以了。这样两个BUG就都解决了
    查看全部
    4 采集 收起 来源:JS动画案例

    2016-04-24

  • 看完最后一节课感觉没必要学js啊,直接学jquery不是方便多了吗?
    查看全部
    4 采集 收起 来源:jQuery动画案例

    2016-04-19

  • 1.过程:obj.stlye.width是样式中的块width;而obj.offsetWidth是显示的width(包括border之类的),故obj.style.width=obj.offsetWidth-1=obj.style.width+borderWidth-1,当borderWidth>1时,其实这是在加宽度而不是减宽度; 2.原型为parseInt ( String s , [ int radix ] ),用于解析一个字符串,并返回一个整数。还有parseFloat,则解析一个字符串,返回一个浮点数; 3.用js的style属性可以获得html标签的样式,但是不能获取非行间样式。即: 用document.getElementById(‘element').style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们要的信息了。所以js用currentStyle和getComputedStyle获取css的非行间样式; 3.var style = window.getComputedStyle("元素", "伪类");第二个参数“伪类”(如果不是伪类,设置为null) (但是课堂里老师设置为false是何解?)
    查看全部
    4 采集 收起 来源:获取样式

    2018-03-22

  • //同时运动框架 function startMove(obj,json,fn){ clearInterval(obj.timer);//清除定时器,避免重复生成多个定时器 obj.timer=setInterval(function(){ var flag=true;//假设刚开始时所有运动都已完成 for (var attr in json) {//遍历json var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(json[attr]-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur!=json[attr]){ flag=false; } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } if (flag) {//当所有运动都完成时,清除定时器 clearInterval(obj.timer); if(fn){ fn(); } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
    查看全部
  • window.onload=function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmouseover=function(){ startMove(Li1,'height',400); } Li1.onmouseout=function(){ startMove(Li1,'height',200); } Li2.onmouseover=function(){ startMove(Li2,'width',400); } Li2.onmouseout=function(){ startMove(Li2,'width',200); } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=parseInt(getStyle(obj,attr)); var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }else{ obj.style[attr]=icur+speed+'px'; } },30); } 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);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
    查看全部
  • <!DOCTYPE html>
    <html>
     <head>
      <title> new document </title> 
      <style>
           *{padding:0;margin:0;}
           #div1{height:200px;width:200px;position:relative;background:#F00;left:-200px;top:0px;}
           #div2{height:200px;width:200px;background:#66F; filter:alpha(opacity:50);opacity:0.5;-moz-opacity:0.5;}
           #share{height:32px;line-height:16px;width:15px; background:#03F;color:#fff;position:absolute;left:200px;top:85px;}
           #ul li{height:50px;width:200px; background:#FF3;margin:10px 0px;border:4px solid #39F;opacity:1; filter:alpha(opacity:100); cursor:pointer;}
      </style> 
      <script>
      window.onload = function(){
          var oDiv=document.getElementById("div1");
          var aDiv=document.getElementById("div2");
          var aLi=document.getElementsByTagName("li");
          //鼠标移入,div1滑出
          oDiv.onmouseover = function(){
              startMove(oDiv,{left:0});
              }
          //鼠标移开,div1滑回
          oDiv.onmouseout = function(){
              startMove(oDiv,{left:-200});
              }
          //鼠标移入,div2透明度变100
          aDiv.onmouseover = function(){
              startMove(aDiv,{opacity:100});
              }
          aDiv.onmouseout = function(){
              startMove(aDiv,{opacity:30});
              }
          //黄块组合运动
          for(i=0;i<aLi.length;i++){ 
              aLi[i].timer=null;   //给每个li单独添加定时器,避免公用定时器
              aLi[i].onmouseover = function(){
                  var nextE=this;
                  startMove(this,{width:400,height:100},function(){
                      startMove(nextE,{opacity:50});
                      });
                  }
              aLi[i].onmouseout = function(){
                  startMove(this,{opacity:100,width:390,height:50});
                  }
              }
          }
         //var timer=null;
        //json
    //    var json = {a:2,b:7,c:0};
    //    for(var i in json){
    //        //alert(i);    //依次弹出变量a,b,c
    //        alert(json[i]);  //依次弹出变量的值2,7,0
    //        }
      
      
    //Start运动框架
        //json语句
        //    var json = {a:2,b:7,c:0};
        //    for(var i in json){
        //        //alert(i);    //依次弹出变量a,b,c
        //        alert(json[i]);  //依次弹出变量的值2,7,0
        //        }
       //startMove(obj,{attr1:itarget1,attr2:itarget2},fn)    //attr表属性,iTarget表目标值,多个属性目标值组成json数组
      function startMove(e,json,fn){    //e表对象,json表{attr1:itarget1,attr2:itarget2,···},fn表回调函数
          clearInterval(e.timer);        //清除定时器,e.timer表示给每个对象定义一个定时器,避免共用一个定时器
          e.timer = setInterval(function(){
               for(var attr in json){   //定义attr为json中的变量,即属性,遍历所有属性。避免一个属性变化完后,其他属性也停止变化
                   var flag = true;     //假设所有属性都已经满足icur == json[attr]时,flag为true
                 //取当前的值
                  var icur=0;
                  if(attr == 'opacity'){
                      icur=Math.round(parseFloat(getStyle(e,attr))*100); 
                      }
                  else{
                      icur=parseInt(getStyle(e,attr));              
                      }
                  //算速度
                  var speed=(json[attr]-icur)/5;    
                  speed=speed>0?Math.ceil(speed):Math.floor(speed);
                  //检测停止
                  if(icur != json[attr]){   //json[attr]表示iTarget,即如果当前存在属性值不等于目标值,flag值为false
                      flag=false;    
                      }
                  if(attr == 'opacity'){
                      e.style.opacity=(icur+speed)/100;
                      e.style.filter="alpha(opacity:"+icur+speed+")";
                      }
                  else{
                      e.style[attr]=icur+speed+"px";
                      }
                } 
              if(flag){     //flag为true,即所有当前属性值等于目标值时时,执行下面的方法
                  clearInterval(e.timer3);
                  if(fn){
                      fn();
                      }
                }
          },50)
          }
          //获取样式,兼容处理
      function getStyle(obj,attr){
          if(obj.currentStyle){
              return obj.currentStyle[attr];
              }
          else{
              return getComputedStyle(obj,false)[attr];
              }
          }
    //End运动框架
      </script>
     </head> 
     <body> 
           <div id="div1">
               <span id="share">分享</span>
           </div>
           <div id="div2"></div>
           <ul id="ul">
               <li id="li1"></li>
               <li id="li2"></li>
               <li id="li3"></li>
           </ul>
     </body>
    </html>
    查看全部
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1.您至少已经具备JavaSript的知识。2.您已经具备一些开发经验。
老师告诉你能学到什么?
1.使用定时器实现简单动画。2.如何一步步封装库。2.培养编程的思想。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!