JS动画效果

链式动画
同时运动
淘宝动画案例

链式动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>链式动画</title>
    <style type="text/css">
        body, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul li {
            width: 200px;
            height: 100px;
            background-color: Yellow;
            margin-bottom: 20px;
            border: black solid;
            opacity: 0.3;
        }
    </style>
    <script>
        window.onload = function () {
            var Li1 = document.getElementById('li1');
            var Li2 = document.getElementById('li2');
            Li1.onmouseover = function () {
                startMove(Li1, 'width', 400, function () {
                    startMove(Li1, 'opacity', 100);
                })
            }
            Li1.onmouseout = function () {
                startMove(Li1, 'opacity',30, function () {
                    startMove(Li1, 'width', 200);
                });
            }
            Li2.onmouseover = function () {
                startMove(Li2, 'opacity', 100);//改变透明度
            }
            Li2.onmouseout = function () {
                startMove(Li2, 'opacity',30);
            }
        }

//        var alpha=30;
        function startMove(obj, attr, iTarget,fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var icur = 0;
                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);
                    if(fn){
                        fn();
                    }
                } else {
                    if(attr=='opacity'){
                        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];
            }
        }
    </script>
</head>

<body>
<ul>
    <li id="li1" style=""></li>
    <li id="li2" style=""></li>
</ul>
</body>
</html>

同时运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同时运动</title>
    <style>
        ul {
            list-style: none;
        }

        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 4px solid #000;
            opacity: 0.3;
        }

        ul li:hover {
            box-shadow: 0 0 7px 4px #ccc;
        }
    </style>

    <script>
        window.onload = function () {
            var oLi = document.getElementById("li1");
            oLi.onmouseover = function () {
                startMove(oLi, {'width': 401, 'height': 200, 'opacity': 100})
            };
            oLi.onmouseout = function () {
                startMove(oLi, {'width': 200, 'height': 100, 'opacity': 30});
            };
        }

        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);
                    } 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.opacity = (icur + speed) / 100;
                        } else {
                            obj.style[attr] = icur + speed + 'px';
                        }
                    }
                }

                if (flag) {
                    clearInterval(obj.timer);
                    //obj.timer = null;
                    if (fn) {
                        fn();
                    }
                }
            }, 30);
        }

        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
    </script>
</head>
<body>
<ul>
    <li id="li1"></li>
</ul>
</body>
</html>

淘宝动画案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS动画案例</title>

    <style>
        #move {
            width: 300px;
            border: 1px solid #ccc;
            margin: 0 auto;
            padding: 10px;
            overflow: hidden;
        }

        #move a {
            float: left;
            color: red;
            font-size: 10px;
            /*border: 1px solid #00CCCC;*/
            padding: 35px 30px 0 30px;
            margin: 20px 0 20px 10px;

            position: relative;
            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;
            filter: alpha(opacity=100);
            opacity: 1;
        }

        #move a:hover {
            box-shadow: 0 0 7px 4px #ccc;
        }
    </style>

    <script src="move.js"></script>
    <script>
        window.onload = function() {
            var oMove = document.getElementById('move');
            var aLi = oMove.getElementsByTagName('a');
            for(var i = 0; i < aLi.length; i++) {
                aLi[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="img/tao1.png"></i><p>彩票</p></a>
    <a href="#"><i><img src="img/tao2.png"></i><p>电影</p></a>
    <a href="#"><i><img src="img/tao3.png"></i><p>音乐</p></a>
    <a href="#"><i><img src="img/tao4.png"></i><p>缴费</p></a>
    <a href="#"><i><img src="img/tao5.png"></i><p>理财</p></a>
    <a href="#"><i><img src="img/tao6.png"></i><p>外卖</p></a>
</div>
</body>
</html>

move.js

/**
 * Created by DreamBoy on 2016/1/22.
 */
//获取对象样式，如 getStyle(obj, 'width')
function getStyle(obj, attr) {
    if(obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

//动画效果，如 startMove(obj, 'width', 200)
// fn是回调函数，如果fn有传入的话，动画结束后会执行给函数——》可以形成 链式动画
/*function startMove(obj, attr, iTarget, fn) {
 clearInterval(obj.timer);

 obj.timer = setInterval(function() {
 //1.取当前的值
 var icur = 0;
 if(attr == 'opacity') {
 icur = Math.round(parseFloat(getStyle(obj, attr))*100);
 } else {
 icur = parseInt(getStyle(obj, attr));
 }

 //2.计算速度
 var speed = (iTarget - icur) / 10;
 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

 //3.检测停止
 if(icur == iTarget) {
 clearInterval(obj.timer);
 if(fn) {
 fn();
 }
 } 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);
 }*/

//修改——> 不同属性变化的同时运行（使用json  属性值:目标值）
// startMove(ojb,{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);
            } 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);
            //obj.timer = null;
            if(fn) {
                fn();
            }
        }
    }, 30);
}

猜你喜欢