js简单运动封装(制作轮播图前准备)_运动装图片轮播-CSDN博客

本文链接：https://blog.csdn.net/Endeavorseven/article/details/100568088

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js运动</title>
    <style type="text/css">
        html,body{
            height:100%; margin:0; padding:0; position:relative;
        }
        #demo,#down,#right{
            width:100px; height:100px; position:absolute; left:0; top:0;
            background-color:skyblue;text-align: center;line-height: 100px;
        }        
    </style>
    <script>
        function Animate(_element){
            this.hz=30;//频率，多久走一次

            this.calculate=function(_css,_time){//计算步长的方法
                this.times=_time/this.hz;//加算一共要走的次数
                if(_css.left){//判断_css样式里是否有left属性
                    this.hs=(Number(_css.left.match(/\d+/g)[0])-_element.offsetLeft)/this.times;//计算水平方向步长
                }
                if(_css.top){//判断_css样式里是否有top属性
                    this.vs=(Number(_css.top.replace(/\px/g,""))-_element.offsetTop)/this.times;//计算垂直方向步长
                }
            }

            this.start=function(_css,_time){//运动函数
                var _me=this;//存储this
                var count=1;//定时器运行一次记几个数
                this.calculate(_css,_time);//调用calculate方法
                this.timer=window.setInterval(function(){
                    if(_css.left){//判断_css样式里是否有left属性
                        _element.style.left=_element.offsetLeft+_me.hs+"px";//运行一次定时器水平方向移动的距离
                    }
                    if(_css.top){//判断_css样式里是否有top属性
                        _element.style.top=_element.offsetTop+_me.vs+"px";//运行一次定时器垂直方向移动的距离
                    }
                    if(count++>=_me.times){//如果运行的次数大于等于频率的时候清除定时器
                        clearInterval(_me.timer);//清除定时器
                    }
                },this.hz)
            }
        }
        window.onload=function(){
            var _a=new Animate(document.getElementById("demo"));
            _a.start({
                left:"800px",
                top:"600px"
            },600)
            var _r=new Animate(document.getElementById("right"));
            _r.start({
                left:"800px"
            },300)
            var _d=new Animate(document.getElementById("down"));
            _d.start({
                top:"600px"
            },1000)
        };
    </script>
</head>
<body>
    <div id="demo">右下</div>
    <div id="right">右</div>
    <div id="down">下</div>
</body>
</html>