JS简易运动框架

最新推荐文章于 2022-11-15 14:03:20 发布

Golden_CHJ

最新推荐文章于 2022-11-15 14:03:20 发布

阅读量555

点赞数 1

分类专栏： JS 文章标签： javascript 动画简单

本文链接：https://blog.csdn.net/qq_37963955/article/details/72793455

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Ps：此代码在慕课网上有详解（http://www.imooc.com/video/3181）

先放代码

function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } /*window.onload=function(){ var ali=document.getElementsByTagName('li'); for(var i=0;i<ali.length;i++){ ali[i].timer=null; ali[i].onmouseover=function(){ stratMove(this,'opacity',100); } ali[i].onmouseout=function(){ stratMove(this,'opacity',20); } } }*/ function stratMove(obj,json,fn){ var flag=true; clearInterval(obj.timer); obj.timer=setInterval(function(){ 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;//8为比例系数 speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur!=json[attr]) { flag=false; } /* clearInterval(obj.timer); if (fn){ fn(); } }*/ 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) }

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="move.js"></script>
    <script language="JavaScript">
        window.onload=function() {
            var li = document.getElementById('li1');
            li.onmouseover = function () {
                stratMove(li, {'width':400,'height':200})
            }
            li.onmouseout = function () {
                stratMove(li, {'width':200,'height':100})
            }
        }
    </script>
    <title>Title</title>
    <style type="text/css">
        li{
            width: 200px;
            height: 100px;
            background-color: yellow;
            border: 2px solid;
        }
    </style>
</head>
<body>
<ul>
    <li id="li1">
    </li>
</ul>
</body>
</html>

略解：

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

这个是判断浏览器返回样式的函数，IE浏览器不支持getComputedStyle的返回，这个函数使move.js兼容IE。

function stratMove(obj,json,fn){
    var flag=true;
    clearInterval(obj.timer); //防止鼠标重新激活此函数后造成的速度叠加
    obj.timer=setInterval(function(){

        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;//8为比例系数，正数为向右移动，负数为向左移动
        speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度除不尽，会造成到不了target的情况。
        //3.检测停止，这有防止json中完成了一个值的变动后便停止了运动
        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)

}

Golden_CHJ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS简易运动框架

Ps：此代码在慕课网上有详解（http://www.imooc.com/video/3181）先放代码 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr];...
复制链接

扫一扫