首页 > 其他分享 >JS动画框架及案例

JS动画框架及案例

时间：2022-11-28 20:06:06浏览次数：36  
标签：function 动画 obj timer JS 案例 var oDiv speed 


JS动画效果：
综合——运动框架 move.js
1、简单动画
    1-1、速度动画  D01_share.html
    1-2、透明度动画  D02_opacity.html
2、缓冲动画
    2-1、缓冲动画  D03_speed.html
3、多物体动画
    3-1、多物体动画  D04_morespart01.html D04_morespart02.html
    3-2、获取样式  D05_getStyle01.html D05_getStyle02.html
    3-3、任意属性值（一）  D06_anyValue.html
    3-4、任意属性值（二）
4、链式动画
    4-1、链式动画  D07_chainAnimation.html
5、同时运动
    5-1、同时运动 D08_json.html（json的介绍） D08_sametimeMove.html
    5-2、完美运动框架 move.js
6、动画案例

速度动画 D01_share.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>速度动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 200px;
            height: 250px;
            background-color: #807a62;
            position: relative;
            left: -200px;
            top: 0;
        }
        #div1 span {
            width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
            height: 50px;
            background-color: aquamarine;
            position: absolute;
            left: 200px;
            top: 75px;
            text-align: center;
        }
    </style>

    <script>
        var oDiv;
        window.onload = function() {
            oDiv = document.getElementById('div1');
            /*oDiv.onmouseover = startMoveIn;
            oDiv.onmouseout = startMoveOut;*/

            oDiv.onmouseover = function() {
                //startMove(10, 0);
                startMove02(0);
            };
            oDiv.onmouseout = function() {
                //startMove(-10, -200);
                startMove02(-200);
            };
        };

        var timer=null;
        /*startMoveIn() 和 startMoveOut()方法相似，可以进行提取合成 --> startMove()*/
        /*function startMoveIn() {
            clearInterval(timer);

            timer = setInterval(function() {
                if(oDiv.offsetLeft == 0) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
                }
            },30);
        }

        function startMoveOut() {
            clearInterval(timer);

            timer = setInterval(function() {
                if(oDiv.offsetLeft == -200) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
                }
            },30)
        }*/

        function startMove(speed, iTarget) {
            clearInterval(timer);

            timer = setInterval(function() {
                if(oDiv.offsetLeft == iTarget) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            },30);
        }

        //除去speed参数
        function startMove02(iTarget) {
            clearInterval(timer);

            var speed;
            if(oDiv.offsetLeft > iTarget) {
                speed = -10;
            } else {
                speed = 10;
            }

            timer = setInterval(function() {
                if(oDiv.offsetLeft == iTarget) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            },30);
        }
    </script>
</head>
<body>
    <div id="div1"><span id="share">分享</span></div>
</body>
</html>



透明度动画  D02_opacity.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度动画</title>
    <style>
        body,div{
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            filter: alpha(opacity=30); /*基于IE*/
            opacity: 0.3; /*基于火狐、Chrome*/
        }
    </style>

    <script>
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover = function() {
                startMove(100);
            };
            oDiv.onmouseout = function() {
                startMove(30);
            };
        };

        var timer = null;
        var alpha = 30;
        function startMove(iTarget) {
            var oDiv = document.getElementById('div1');

            //解决定时器叠加的问题
            clearInterval(timer);
            timer = setInterval(function() {
                var speed = 0;
                if(alpha > iTarget) {
                    speed = -10;
                } else {
                    speed = 10;
                }

                if(alpha == iTarget) {
                    clearInterval(timer);
                } else {
                    alpha += speed;
                    oDiv.style.filter = 'alpha(opacity='+alpha+')';
                    oDiv.style.opacity = alpha / 100;
                }
            },30);
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>


缓冲动画  D03_speed.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓冲动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 200px;
            height: 250px;
            background-color: #807a62;
            position: relative;
            left: -200px;
            top: 0;
        }
        #div1 span {
            width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
            height: 50px;
            background-color: aquamarine;
            position: absolute;
            left: 200px;
            top: 75px;
            text-align: center;
        }
    </style>

    <script>
        var oDiv;
        window.onload = function() {
            oDiv = document.getElementById('div1');
            /*oDiv.onmouseover = startMoveIn;
             oDiv.onmouseout = startMoveOut;*/

            oDiv.onmouseover = function() {
                //startMove(10, 0);
                startMove02(0);
            };
            oDiv.onmouseout = function() {
                //startMove(-10, -200);
                startMove02(-200);
            };
        };

        var timer=null;

        //除去speed参数
        function startMove02(iTarget) {
            clearInterval(timer);

            timer = setInterval(function() {
                var speed = (iTarget - oDiv.offsetLeft) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(oDiv.offsetLeft == iTarget) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            },30);
        }
    </script>
</head>
<body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>


多物体动画  D04_morespart01.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;
        }
    </style>

    <script>
        window.onload = function() {
            var aLi = document.getElementsByTagName('li');
            for(var i = 0; i<aLi.length; i++) {
                aLi[i].timer = null; //为每一个li加一个定时器
                aLi[i].onmouseover = function() {
                    startMove(this,400);
                };
                aLi[i].onmouseout = function() {
                    startMove(this,200);
                };
            }
        };

        //var timer = null;
        function startMove(obj, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var speed = (iTarget - obj.offsetWidth) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(obj.offsetWidth == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.style.width = obj.offsetWidth + speed + 'px';
                }
            },30);
        }


    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>


D04_morespart02.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多物体动画</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: red;
            float: left;
            margin: 10px;

            filter: alpha(opacity=30);
            opacity: 0.3;
        }
    </style>

    <script>
        var ds;
        window.onload = function() {
            ds = document.getElementsByTagName('div');

            for(var i = 0; i < ds.length; i++) {
                ds[i].timer = null;
                ds[i].alpha = 30;

                ds[i].onmouseover = function() {
                    startChange(this, 100);
                };
                ds[i].onmouseout = function() {
                    startChange(this, 30);
                };
            }
        }

        function startChange(obj, iTarget) {
            clearInterval(obj.timer);

            obj.timer = setInterval(function() {
                var speed = (iTarget - obj.alpha) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(obj.alpha == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.alpha += speed;
                    obj.style.filter = 'alpha(opacity=' + obj.alpha + ')';
                    obj.style.opacity = obj.alpha / 100;
                }
            }, 30);
        }

    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>


获取样式  D05_getStyle01.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取样式</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            border: 2px solid #000;
            font-size: 12px;
            color: #fff;
        }
    </style>

    <script>
        var oDiv;
        window.onload = function() {
            oDiv = document.getElementById('div1');
            setInterval(function() {
                //oDiv.style.width = parseInt(getStyle(oDiv, 'width')) - 1 + 'px';
                oDiv.style.fontSize = parseInt(getStyle(oDiv, 'fontSize')) + 1 + 'px';
            }, 30);
        };

        //获取样式
        function getStyle(obj, attr) {
            if(obj.currentStyle) { //currentStyle 针对IE浏览器
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj,false)[attr]; //getComputedStyle 针对火狐浏览器
            }
        }
    </script>
</head>
<body>
    <div id="div1">font-size</div>
</body>
</html>


D05_getStyle02.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: 1px solid yellowgreen;
        }

        ul li:hover {
            box-shadow: 0 0 7px 2px #0CC;
        }
    </style>
    <script>
        var aLi;
        window.onload = function() {
            aLi = document.getElementsByTagName('li');

            for(var i = 0; i < aLi.length; i++) {
                aLi[i].timer = null;
                aLi[i].onmouseover = function() {
                    startChange(this, 400);
                };
                aLi[i].onmouseout = function() {
                    startChange(this, 200);
                };
            }
        };

        function startChange(obj, iTarget) {
            clearInterval(obj.timer);

            obj.timer = setInterval(function() {
                var icur = parseInt(getStyle(obj, 'width'));
                var speed = (iTarget - icur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(icur == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.style.width = icur + speed + 'px';
                }
            }, 30);
        }

        function getStyle(obj, attr) {
            if(obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
    </script>
</head>
<body>

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


任意属性值  D06_anyValue.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: 1px solid yellowgreen;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }

        ul li:hover {
            box-shadow: 0 0 7px 2px #0CC;
        }
    </style>
    <script>
        var li1, li2, li3;
        window.onload = function() {
            li1 = document.getElementById('li1');
            li2 = document.getElementById('li2');
            li3 = document.getElementById('li3');

            li1.onmouseover = function() {
                startChange(this, 'height', 400);
            };
            li1.onmouseout = function() {
                startChange(this, 'height', 100);
            };
            li2.onmouseover = function() {
                startChange(this, 'width', 400);
            };
            li2.onmouseout = function() {
                startChange(this, 'width', 200);
            };
            li3.onmouseover = function() {
                startChange(this, 'opacity', 100);
            };
            li3.onmouseout = function() {
                startChange(this, 'opacity', 50);
            };
        };

        function startChange(obj, attr, iTarget) {
            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) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(icur == iTarget) {
                    clearInterval(obj.timer);
                } 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];
            }
        }
    </script>
</head>
<body>

</body>
<ul>
    <li id="li1"><p>我是高度改变~</p></li>
    <li id="li2"><p>我是宽度改变~</p></li>
    <li id="li3"><p>我是透明度改变~</p></li>
</ul>
</html>


JS动画框架  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) / 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);
            //obj.timer = null;
            if(fn) {
                fn();
            }
        }
    }, 30);
}



链式动画  D07_chainAnimation.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链式动画</title>

    <style>
        body, ul, li{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 4px solid #000;
            filter: alpha(opacity=30);
            opacity: 0.3;
        }
    </style>

    <script src="move.js"></script>
    <script>
        window.onload = function() {
            var li1 = document.getElementById('li1');
            li1.onmouseover = function() {
                startMove(li1, 'width', 400, function() {
                    startMove(li1, 'height', 200, function() {
                        startMove(li1, 'opacity', 100);
                    });
                });
            };
            li1.onmouseout = function() {
                startMove(li1, 'opacity', 30, function() {
                    startMove(li1, 'height', 100, function() {
                        startMove(li1, 'width', 200);
                    });
                });
            }
        };
    </script>
</head>
<body>
    <ul>
        <li id="li1"></li>
    </ul>
</body>
</html>


json介绍  D08_json.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json介绍</title>
    <script>
        //定义一个json
        var json = {
            a:12,
            b:13
        };

        //遍历json
        for(var i in json) {
            document.write(i + ":" + json[i] + "<br/>");
        }
    </script>
</head>
<body>

</body>
</html>


同时运动  D08_sametimeMove.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;
            filter: alpha(opacity=30);
            opacity: 0.3;
        }
        ul li:hover {
            box-shadow: 0 0 7px 4px #ccc;
        }
    </style>
    <script src="move.js"></script>
    <script>
        window.onload = function() {
            var oLi = document.getElementById("li1");
            oLi.onmouseover = function() {
                startMove(oLi, {'width':400, 'height':200, 'opacity': 100}, function() {
                    startMove(oLi, {'width': 600});
                });
            };
            oLi.onmouseout = function() {
                startMove(oLi, {'width':200, 'height':100, 'opacity': 30});
            };
        }
    </script>
</head>
<body>
    <ul>
        <li id="li1"></li>
    </ul>
</body>
</html>


JS动画案例  D09_JSAnimationDemo.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');

            var k=0;
            for(var i = 0; i < aLi.length; i++) {
                aLi[i].onmouseover = function() {
                    var _this = this.getElementsByTagName('i')[0];
                    startMove(_this, {'top':-25, 'opacity': 0}, function() {
                        _this.style.top = 35 + 'px';
                        startMove(_this, {'top':20, 'opacity': 100});
                    });
                };
            }
        };
    </script>
</head>
<body>
    <div id="move">
        <a href="#"><i><img src="img/caipiao.png"></i><p>彩票</p></a>
        <a href="#"><i><img src="img/movie.png"></i><p>电影</p></a>
        <a href="#"><i><img src="img/music.png"></i><p>音乐</p></a>
        <a href="#"><i><img src="img/jiaofei.png"></i><p>缴费</p></a>
        <a href="#"><i><img src="img/licai.png"></i><p>理财</p></a>
        <a href="#"><i><img src="img/food.png"></i><p>外卖</p></a>
    </div>
</body>
</html>


结果演示：

JS动画框架及案例_Javascript

鼠标移动到图标处，发生动画效果：

JS动画框架及案例_Javascript_02

原素材如下：

JS动画框架及案例_宽高_03

  caipiao.png   

JS动画框架及案例_Javascript_04

  movie.png   

JS动画框架及案例_宽高_05

  music.png   

JS动画框架及案例_动画_06

  jiaofei.png   

JS动画框架及案例_i++_07

  licai.png   

JS动画框架及案例_i++_08

  food.png


标签：function,动画,obj,timer,JS,案例,var,oDiv,speed
From： https://blog.51cto.com/u_15894233/5893597

相关文章

  • xml_解析_Jsoup_快速入门以及Jsoup对象
    xml_解析_Jsoup_快速入门快速入门：1.导入jar包：2.获取Document对象：3.获取对应的标签Element对象：4.获取数据publicclassJsoupDemo1{publicst......
  • js基础笔记学习226练习2之1
    全选和反选 checked控制选中......
  • Java：Hutool工具箱之hutool-jsonJSON数据读取转换处理
    文档https://hutool.cn/docs/#/json/概述依赖<dependency><groupId>cn.hutool</groupId><artifactId>hutool-json</artifactId><version>5.8.10</versi......
  • JSP知识随手记
    目录​​目录​​​​介绍​​​​JSP运行原理​​​​JSP最佳实践​​​JSP指令​​​page指令​​​​include指令​​​​taglib指令​​​JSP九大内置对象​​​out隐式......
  • JSP中的自定义标签
    目录​​目录​​​​简介​​​​入门案例​​​​自定义标签功能扩展​​​​传统自定义标签的运行原理​​​传统自定义标签的使用​​​控制JSP页面部分内容执行​​​......
  • AngularJS自学之路——知识点记录（一）
    AngularJS（以下知识点摘抄自《AngularJS权威教程》一书。）1、ng-app指令标记了AngularJS脚本的作用域；2、AngularJS应用引导过程有3个重要点：1）注入器（injector）将用于创建此应用程......
  • jsp servlet 中的页面路径问题
    user是项目根目录下的一个子目录。<!--修改前的--><framesetrows="80,*"><framesrc="top.jsp"name="top"><framesetcols="10%,*"><framesrc="/user/left.jsp"......
  • 记一次 从servlet传参数到jsp页面出现乱码问题的解决参考
    rs=conn.executeQuery(sql);while(rs.next()){i++;//编号加1p_code=rs.getString("code");p_name=rs.getString("name");p_price=rs.getD......
  • 一个可以防止刷新的JSP计数器
    一个可以防止刷新的JSP计数器<%@pagecontentType="text/html;charset=gb2312"%><!--jsp(SUN企业级应用的首选)计数器--><%--以前学ASP时,用ASP做防止刷新的计数器很......
  • JSP中filter过滤器验证用户登录
    JSP中filter过滤器验证用户登录现在JSP使用越来越广泛了，尤其是很多政府的网站都采用了JSP技术，其功能强大且安全。初学者很多有这么个问题，就是，网站的一个权限设置，比如......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99