JS动画效果_技术笔记

little慕慕 2019-08-10

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>More</title>
<style type="text/css">
body, ul, li, span {
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
background-color: red;
width: 200px;
height: 100px;
margin-bottom: 20px;
border: 4px solid black;
filter: alpha(opacity=30);/*针对IE设置透明度*/
opacity: 0.3;/*针对火狐/chrome浏览器*/
}
</style>
<script src="same.js"></script>
<script>
window.onload = function() {
var li1=document.getElementById("li1");
li1.onmouseover=function(){
startMove(li1,{width:201,height:200,opacity:100});
}
li1.onmouseout=function(){
startMove(li1,{width:200,height:100,opacity:30});
}
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>

function getStyle(obj,attr) {
if(obj.currentStyle){//IE浏览器
return obj.currentStyle[attr];
}
else{//firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn) {//添加一个回调函数fn
var flag=true;//假设,标志所有运动是否到达目标值
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
//1.取当前的值
var icur=null;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed = (json[attr]-icur)/8;
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)
}

0赞 · 0采集
甜橙可爱多 2019-04-23

当加了一个定时器后，为什么不清除定时器，动画也能停止？
注意：在缓冲运动中，一定是在缓冲运动中，speed的值为0后动画停止了，此时定时器实际上还在运行中。

0赞 · 0采集

慕粉0815224883 2019-04-01

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> p标签</title>
    <style type='text/css'>
        *{
            margin:0px;
            padding:0px;
        }
        li{
            width:200px;
            height:100px;
            margin:20px;
            list-style:none;
            background-color:yellow;
            opacity:0.3;
        }
    </style>
    <script type='text/javascript'>
        window.onload=function(){
            var oLi=document.getElementsByTagName('li');
            for(var i=0;i<oLi.length;i++){
                oLi[i].onmouseover=function(){
                    var that=this;
                    startMove(this,{width:400,height:200},function(){
                        startMove(that,{opacity:100});
                    });
                }
                oLi[i].onmouseout=function(){
                    var that=this;
                    startMove(this,{height:100,width:200},function(){
                        startMove(that,{opacity:30})
                    });
                }
            }
        }
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
        function startMove(obj,json,fn){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                for(var attr in json){
                    var flag = true;
                    var icur=null;
                    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);
                        obj.style.opacity=(icur+speed)/100;
                    }
                    else{
                        obj.style[attr]=icur+speed+'px';
                    }
                }
                if (flag) {
                    clearInterval(obj.timer);
                    if(fn) {
                        fn();
                    }
                }
            },30)
        }
    </script>
</head>

<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

2赞 · 1采集

ParseDark 2018-08-26

对于同时进行的运动，停止所有动画的一个判定条件。

1赞 · 1采集
ParseDark 2018-08-26

同时运动的关键在于，使用遍历，给dom加上不一样的定时器。

1赞 · 1采集
ParseDark 2018-08-26

for in ----------------多用于遍历json对象。
对于复杂，多参数的函数，我们可以考虑把入参的结构改为json

1赞 · 2采集

阿宅娘 2018-05-24

<!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>

4赞 · 6采集

阿宅娘 2018-05-24

//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];   //IE
          }
      else{
          return getComputedStyle(obj,false)[attr];   //FireFox及谷歌
          }
      }
//End运动框架

1赞 · 0采集

qq_小乖_7 2018-04-20

function startMove(obj,json,fn){
var flag =true; //设定所有假设都成立
clearInterval(obj.timer);
obj.timer =setInterval(function(){

for(attr in json){
var icur =0;
if(attr =='opacity'){
var icur =parseFloat(getStyle(obj,attr)*100);
}else{
var icur =parseInt(getStyle(obj,attr));
}
var speed =(json[attr] - icur)/8;
speed =speed>0? Math.ceil(speed) : Math.floor(speed);
if(json[attr] != icur){
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];
} //基于IE
else{
return getComputedStyle(obj,false)[attr];
}
}

2赞 · 4采集
GYNexus 2018-03-23

JSON格式：var json = {key : value , key1 : value1};
遍历：for(var i : json) {
i;(key值)
json[i];(value值)
}

0赞 · 0采集
诺亚 2018-03-08

//做了验证，在动画完执行后，定时器确实没有被清除，flag没起作用 function getStyle(obj,attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } var alpha = 30; function startMove(objj,json,fn) { var flag = true; clearInterval(objj.timer); objj.timer = setInterval(function () { var icur = 0; for(var attr in json){ if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(objj,attr))*100); }else{ icur = parseInt(getStyle(objj,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') { objj.style.filter = 'alpha(opacity:'+icur+speed+')'; objj.style.opacity = (icur+speed)/100; } else { objj.style[attr] = icur+speed+'px'; } if (flag) { console.log('未输出任何内容，证明动画执行完后未清除定时器'); clearInterval(objj.timer); if(fn){ fn(); } } } },30); }

0赞 · 0采集
诺亚 2018-03-08

//注释所有flag代码，动画仍然正确执行，不知道此时定时器是否清除 function getStyle(obj,attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } var alpha = 30; function startMove(objj,json,fn) { //var flag = true; clearInterval(objj.timer); objj.timer = setInterval(function () { var icur = 0; for(var attr in json){ if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(objj,attr))*100); }else{ icur = parseInt(getStyle(objj,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') { objj.style.filter = 'alpha(opacity:'+icur+speed+')'; objj.style.opacity = (icur+speed)/100; } else { objj.style[attr] = icur+speed+'px'; } // if (flag) { // clearInterval(objj.timer); // if(fn){ // fn(); // } // } } },30); }

0赞 · 0采集
白鹿max 2018-01-19

JSON 轻量级数量交互

0赞 · 0采集
慕后端1299353 2018-01-11

setInterval无法执行问题已解决，代码太长，放不到笔记上，已放博客http://blog.csdn.net/need_just_word/article/details/79032185

1赞 · 0采集
小白_0001 2017-11-06

<script type="text/javascript"> var json={a:12,b:13}; for(var i in json){ document.write('name:'+i+' '+'key:'+json[i]+'<br />'); } </script>

0赞 · 0采集
慕仙5237505 2017-11-01

最后尾

截图
0赞 · 0采集
慕仙5237505 2017-11-01

重点额

截图
0赞 · 0采集
慕仙5237505 2017-11-01

重点：

截图
0赞 · 0采集
慕仙5237505 2017-11-01

最终版 function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } var alpha=30; function move(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=(json[attr]-curr)/8; 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){ fn(); } } },30) }

截图
0赞 · 1采集
慕仙5237505 2017-11-01

前段同步运动： <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul li{list-style:none;} li{width:200px; height:100px; background-color:yellow; margin-bottom:20px; border:2px solid #0f0; opacity:0.3; filter:alpha(opacity:30); } </style> <script src="test.js"></script> <script type="text/javascript"> window.onload=function(){ var ali=document.getElementById("li1"); ali.onmousemove=function(){ move(ali,{width:300,height:300}); } } //var json={a:1,b:2}; </script> </head> <body> <ul> <li id="li1"></li> </ul> </body>

截图
0赞 · 0采集
慕仙5237505 2017-11-01

function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } var alpha=30; function move(obj,json,fn){ 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=(json[attr]-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //检测停止 if(curr==json[attr]){ clearInterval(obj.timer); if(fn){ fn(); } }else{ if(attr=="opacity"){ obj.style.filter="alpha(opacity:"+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+"px"; } } } },30) }

截图
0赞 · 0采集
慕仙5237505 2017-11-01

上部分

截图
0赞 · 0采集
qq_累_5 2017-09-12

不用json的同步运动，本人自己写的，如有错误或者此方法没有使用json的方法好的原因请大家务必私信告诉我 var heighttimer="height"+"timer"; var opacitytimer="opacity"+"timer"; li1.onmouseover = function() { startMove(this, 'height', 400,heighttimer); startMove(this, 'opacity', 30,opacitytimer); } li1.onmouseout = function() { startMove(this, 'height', 100,heighttimer); startMove(this, 'opacity', 100,opacitytimer); ｝ function startMove(obj, attr, target,attrtimer) { clearInterval(obj[attrtimer]); obj[attrtimer] = setInterval(function() { var icur ; if(attr=='opacity') icur= parseFloat(getStyle(obj, attr))*100; else icur= parseInt(getStyle(obj, attr)); var speed = (target - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (target == icur) clearInterval(obj[attrtimer]); else { if(attr=='opacity') obj.style.opacity=(icur+speed)/100; else obj.style[attr] = icur + speed + "px"; } }, 30) }

0赞 · 0采集
风飘叶摇 2017-09-02

一：如果将var flag=true 放在定时器外，定时器内部函数只能将flag变为false,不能完成链式运动。二：如果将var flag=true 放在定时器内，假设json参数第一二个分别是width、height，若width已经到达final值，flag仍为true，不会设置为false，就会清除定时器结论：只有当json内的所有参数都达到final值，才能执行消除定时器的操作。将var flag=true放在定时器内部最开头，在定时器内部设置一个getFlag()的函数，此函数遍历json所有参数是否到达final值，只有所有参数都达到final值，flag才会为true。

2赞 · 1采集
qq_与陌Dance_0 2017-08-16

<script type="text/javascript"> window.onload=function(){ var oLi=document.getElementById('li1'); oLi.onmousemove=function(){ startMove(this,{width:400,height:200},function(){ startMove(this,{opacity:100}); }); } oLi.onmouseout=function(){ startMove(this,{opacity:30},function(){ startMove(this,{width:200,height:100,opacity:30}); }); } } </script>

0赞 · 0采集
qq_与陌Dance_0 2017-08-16

<script src="move.js"> function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json, fn) { var flag; clearInterval(obj.timer); obj.timer = setInterval(function() { flag = true; 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) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 3.检测停止 if (json[attr] != icur) { 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.call(obj); } } }, 30) } </script>

0赞 · 0采集
qq_与陌Dance_0 2017-08-16

var json={name1：value1，name2：value2}； for(var i in json){//循环遍历取出 i;//取出name json[i];//取出value } 多属性同时运动时，应用flag表示所有属性皆已到达目标值，然后再结束运动。 function startMove(ele, data, fn){ timer = setInterval(function(){ var flag = true; for(var attr in data){ var val, speed; ...... if(val != data[attr]) flag = false; } if(flag){ clearInterval(timer); if(fn) fn(); }, 30); }

0赞 · 0采集
yaya_ling 2017-06-08

var json={name1：value1，name2：value2}； for(var i in json){//循环遍历取出 i;//取出name json[i];//取出value }

0赞 · 0采集
qq_MJ_7 2017-05-29

完整运动框架demo,http://pan.baidu.com/s/1qYhSS1Y

0赞 · 1采集
白小九 2017-05-11

多属性同时运动时，应用flag表示所有属性皆已到达目标值，然后再结束运动。 function startMove(ele, data, fn){ timer = setInterval(function(){ var flag = true; for(var attr in data){ var val, speed; ...... if(val != data[attr]) flag = false; } if(flag){ clearInterval(timer); if(fn) fn(); }, 30); }

截图
0赞 · 0采集

数据加载中...