JS实现css属性动画效果

最新推荐文章于 2024-03-16 21:29:52 发布

weixin_34355715

最新推荐文章于 2024-03-16 21:29:52 发布

阅读量109

点赞数

文章标签： json

原文链接：https://segmentfault.com/a/1190000011926905

版权

html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css属性运动框架</title>
 <style>
     body,div{
         margin: 0;
         padding: 0;
     }
     ul,li{
         list-style: none;
     }
     ul li{
         width: 200px;
         height: 100px;
         background: yellowgreen;
         margin-bottom: 20px;
         filter:alpha(opacity:30);
         opacity: 0.3;
         border:4px solid #666666;
     }
 </style>
 <script src="js/move.js"></script>
 <script>
     window.onload=function(){
    var Li1=document.getElementById('li1');
    var Li2=document.getElementById('li2');
    var Li3=document.getElementById('li3');
    var Li4=document.getElementById('li4');
    var Li5=document.getElementById('li5');
  Li1.onmouseover=function(){
     startMove(this,{height:200});
   }
  Li1.onmouseout=function(){
     startMove(this,{height:100});
  }
  Li2.onmouseover=function(){
     startMove(this,{width:400});
  }
  Li2.onmouseout=function(){
     startMove(this,{width:200});
  }
  Li3.onmouseover=function(){
     startMove(this,{opacity:100});
  }
  Li3.onmouseout=function(){
      startMove(this,{opacity:30});
      }
  Li4.onmouseover=function(){
      startMove(Li4,{width:400},function(){
            startMove(Li4,{height:200},function(){
                startMove(Li4,{opacity:100},function(){
                });
            });
        });
    }
  Li4.onmouseout=function(){
        startMove(Li4,{opacity:30},function(){
            startMove(Li4,{height:100},function(){
                startMove(Li4,{width:200});
            });
        });
    }
  Li5.onmouseover=function(){
          startMove(Li5,{width:400,height:200,opacity:100});
      }
  Li5.onmouseout=function(){
          startMove(Li5,{width:200,height:100,opacity:30});
      }            
     }
 </script>
    </head>
    <body>
        <ul>
            <li id="li1">高动画</li>
            <li id="li2">宽动画</li>
            <li id="li3">透明度动画</li>
            <li id='li4'>高宽透明度链式动画</li>
            <li id='li5'>高宽透明度同时动画</li>
        </ul>
    </body>
</html>

引入的JS代码,运动框架move.js

//运动
//startMove(obj,{attr1:itarget1,attr2:itarget2},fn)
function startMove(obj,json,fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var flag=true;//标杆,假设所有运动都达到了目标值
                for(var attr in json)
            {
                    //1.去当前的值
                    var icur = 0;
                    if(attr == 'opacity') {
                        icur = Math.round(parseFloat(getStyle(obj,attr)) * 100); //parseFloat获取小数.Math.round四舍五入
                    } else {
                        icur = parseInt(getStyle(obj, attr)); //parseInt获取整数
                    }
                    //2.算速度
                    var speed = (json[attr] - icur) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    //3.检测属性动画是否全部达到目标值
                    if(icur !== json[attr]) 
                    {
                        flag=false;//如果不是所有的动画都达到目标值，标杆设为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];//火狐 chrome
        }
    }

weixin_34355715

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现css属性动画效果

html代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>css属性运动框架</title> <style> body,div{...
复制链接

扫一扫

JS实现css属性动画效果

html代码

引入的JS代码,运动框架move.js

“相关推荐”对你有帮助么？