前端实践--JavaScript--动画（一）

黄舟原创: 2016-12-30 16:27:41 1230浏览

简单动画

实现效果：

解答：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>简单动画</title>
    <style type="text/css">
        body,div,span{
            margin:0;
            padding;
        }
        #div1{
            width:200px;
            height:200px;
            background:red;
            position:relative;
            left:-200px;
            top:0;  
        }
        #div1 span{
            width:20px;
            height:50px;
            background:blue;
            position:absolute;
            left:200px;
            top:75px;
        }
    </style>
    <script>
/*      版本1.0--代码量大，函数没有参数，效率低
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover = function(){
                startMove();
            }
            oDiv.onmouseout = function(){
                startMove1();
            }
        }
        var timer = null;
        function startMove(){
            clearInterval(timer);
            var oDiv = document.getElementById('div1');
            timer = setInterval(function(){
                if(oDiv.offsetLeft == 0){
                    clearInterval(timer);
                }else{
                    oDiv.style.left = oDiv.offsetLeft+10+'px';
                }                           
            },30)
        }
        function startMove1(){
            clearInterval(timer);
            var oDiv = document.getElementById('div1');
            timer = setInterval(function(){
                if(oDiv.offsetLeft == -200){
                    clearInterval(timer);
                }else{
                    oDiv.style.left = oDiv.offsetLeft-10+'px';
                }                           
            },30)
        } */
/*      版本2.0 startMove函数引入参数speed,iTarget，简化代码，提高代码质量
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover = function(){
                startMove(10,0);
            }
            oDiv.onmouseout = function(){
                startMove(-10,-200);
            }
        }
        var timer = null;
        function startMove(speed,iTarget){
            clearInterval(timer);
            var oDiv = document.getElementById('div1');
            timer = setInterval(function(){
                if(oDiv.offsetLeft == iTarget){
                    clearInterval(timer);
                }else{
                    oDiv.style.left = oDiv.offsetLeft+speed+'px';
                }                           
            },30)
        } */
        // 进一步优化代码，只引入一个参数

        window.onload = function(){
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover = function(){
                startMove(0);
            }
            oDiv.onmouseout = function(){
                startMove(-200);
            }
        }
        var timer = null;
        // 参数iTarget，设置DIV移动的边界。
        // 取消由 setInterval()设置的每一次触发鼠标事件。
        // 设置DIV的运动。        
        function startMove(iTarget){
            clearInterval(timer);
            var oDiv = document.getElementById('div1');
            timer = setInterval(function(){
                var speed = 0;
                if(oDiv.offsetLeft > iTarget){
                    speed = -10;                    
                }else{
                    speed = 10;
                }
                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>

以上就是前端实践--JavaScript--动画（一）的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！

前端实践 JavaScript.动画 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：javascript 判断字符串是否包含某字符串及indexOf使用示例下一条：前端实践--JavaScript--动画（二）