JS运动

1.1匀速运动
可以设置div定位的top和left【正向,反向】
正向为例:

//匀速运动:点完button之后,div开始移动 ,div到达黑色线时,停止   s = vt 
<head>
 	div{
 		width:50px;
 		height:50px;
 		background:red;
 		position:absolute;
 		left:0px;
 		top:0px;
 	}
 	button{
 		margin-top:70px;
 	}
 	span{
 		position:absolute;
 		left:600px;
 		top:0px;
 		width:1px;
 		height:50px;
 		background:black;
 	}
</head>
<body>
	<div></div>
	<button id="btn">run</button>
	<span></span>

	<script>
		var oDiv = document.getElementsByTagName('div');
		var oBtn = document.getElementById('btn')
		//绑定事件
		 var timer = null;
         oBtn.onclick = function(){
      		startMove();
         }
         function startMove(){
         	 //30毫秒后执行  s = vt
            //清空之前触发事件的次数   每次点击运动时,速度一样
        	 clearInterval(timer);
       		 var iSpeed = 100-oDiv.offsetLeft > 0 ? 7 : -7;
             timer = setInterval(function(){
             	if(Math.abs(100 -oDiv.offsetLeft) < Math.abs(iSpeed)){
             		clearInterval(timer);
                    oDiv.style.left = '600px';
                }else{
      		          oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
                     //oDiv.offsetLeft:获取div的left属性
               }      
             },30)
        }
	</script>
</body>

1.2.封装运动函数(匀速运动)

oBtn.onclick = function(){
//s = v t
	startMove(oDiv,300);
}

function startMove (dom ,target){
	clearInterval(timer);
	var iSpeed = target - dom.offsetLeft > 0 ? 7 :-7;
	timer = setInterval(function(){
		if (Math.abs(target - dom.offsetLeft) < (Math.abs(iSpeed)){
			clearInterval(timer);
			dom.style.left + target + 'px';
		}else{
			dom.style.left = dom.offsetLeft + iSpeed + 'px';
		}
	}30)
}
		

2.缓冲运动

<head>
    <style>
            /* 正向 */
            div {
                width:50px;
                height:50px;
                background:red;
                position:absolute;
                left:0px;
                top:0px;
            }
            button{
                margin-top:70px;
            }
            span{
                position:absolute;
                left:600px;
                top:0px;
                width:1px;
                height:50px;
                background:black;
            }
    </style>
    
</head>
<body>
        <div></div>
        <span></span>
        <button id='btn'>run</button>
    <script>
       
        var oDiv = document.getElementsByTagName('div')[0];
        var oBtn = document.getElementById('btn');
        var timer = null;
        oBtn.onclick = function(){
            startMove(oDiv,600);
        }

         //物体的速度 距离目标点越近  就越小  当到达目标点时 速度减小为0
         function startMove(dom,target){
             clearInterval(timer);
             var iSpeed = null;
             timer = setInterval(function(){
                 iSpeed = (target - oDiv.offsetLeft) / 7;

                 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                 if(oDiv.offsetLeft == target){
                     clearInterval(timer);
                 }else{
                     oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
                 }
             },30);
         }
    </script>
</body>

3.demo
隐藏菜单

<head>
 <style>
        .wrapper{
            width:400px;
            height:80px;
            background:orange;
            position:absolute;
            left:-400px;
            top:200px;
        }
        span{
            width:50px;
            height:80px;
            background:red;
            position:absolute;
            right:-50px;
            top:0px;
        }
    </style>
</head>
<body>
    <!-- 隐藏菜单  冒泡事件 -->
    <div class="wrapper">
        <span></span>
    </div>

    <script>
        var timer = null;
        var oDiv = document.getElementsByClassName('wrapper')[0];
        oDiv.onmouseenter = function(){
            startMove(this,0);
        }
        oDiv.onmouseleave = function(){
            startMove(this,-400);
        }

        function startMove(dom,target){
             clearInterval(timer);
             var iSpeed = null;
             timer = setInterval(function(){
                 iSpeed = (target - oDiv.offsetLeft) / 7;

                 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                 if(oDiv.offsetLeft == target){
                     clearInterval(timer);
                 }else{
                     oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
                 }
             },30);
         }
		 //在网页中查看比较方便
         function getStyle (dom, attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom,null)[attr];

            }else{
                return dom.currentStyle[attr];
            }
        }
    </script>
</body>

4. 透明度缓冲运动
//将透明度做成缓冲 只有 0 和 1【同时扩大一百倍】

<head>
	<style>
        div{
            width:100px;
            height:100px;
            background:red;
            opacity:1;
        }
    </style>
</head>
<body>
    <div id = 'demo'></div>
    <script>
        var timer = null;
        var oDiv = document.getElementById('demo');

        oDiv.onclick = function (){
            startMove(this,50);
        }
        function getStyle (dom, attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom,null)[attr];

            }else{
                return dom.currentStyle[attr];
            }
        }
        //将透明度做成缓冲   只有 0 和 1【同时扩大一百倍】
        function startMove(dom,target){
            clearInterval(timer);
            var iSpeed = null, iCur = null;
            iCur = setInterval(function(){
                iCur = parseFloat( getStyle(dom,'opacity') ) * 100; 
                iSpeed = (target - iCur) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur == target){
                    clearInterval(timer);
                }else{
                   // [0,1]  区间的变化太小,以上扩大100倍 ,iCur * 100, iSpeed *100
                    dom.style.opacity = (iCur + iSpeed) / 100;
                }
            },30)
        }
    </script>
 </head>

5.多个物体间运动

<head>
    <style>
        div{
            width:100px;
            height:100px;
            background:red;
            opacity:1;
            margin-bottom:100px;
        }
    </style>
</head>
<body>
    <!-- 类数组 -->
    <div></div>
    <div></div> 
    <div></div>
    <div></div>
    <script>
        //定时器【同一个定时器会互相影响】【若不想影响,可以给每一个div都给一个定时器,在所有timer换成dom.timer】
        var timer = null;
        var oDivArray = document.getElementsByTagName('div');

        for (var i = 0;i < oDivArray.length; i ++){
            // 鼠标放上去时
            oDivArray[i] .onmouseenter = function (){
                startMove(this,400);
            }
            // 鼠标移出时
            oDivArray[i].onmouseleave = function(){
                startMove(this,100);
            }
        }
        // 利用for循环,给每一个div都绑定事件
    

        // oDiv.onclick = function(){
            // startMove(this,50);
        // }
        function getStyle (dom, attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom,null)[attr];

            }else{
                return dom.currentStyle[attr];
            }
        }

        function startMove(dom, target){
            clearInterval(dom.timer);
            var iSpeed = null, iCur = null;
               //iCur为当前宽度值
            dom.timer = setInterval(function(){
                iCur = parseInt(getStyle(dom,'width') );
                //获得width,单位为px
                //parseInt 使字符串转化成整数     
                iSpeed = (target - iCur) / 7;
                // 当前速度是由当前宽度所决定的
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur == target){
                    clearInterval(dom.timer);
                    // 清零
                }else{
                    dom.style.width = iCur + iSpeed + 'px';
                }
            } , 30);
                
        }

    </script>
</body>

6.多物体的不同运动

<head>
	<style>
        div{
            width:50px;
            height:50px;
            opacity:1;
            margin-bottom:60px;
            background-color:blueviolet;
            border :5px solid burlywood;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        // 先清空定时器
        var timer = null;
        var oDivArray = document.getElementsByTagName('div');


        //绑定事件[从第一个div分别写其改变的方法]
        oDivArray[0].onclick = function (){
            startMove(this, 'height', 400);
        }
        oDivArray[1].onclick = function (){
            startMove(this, 'width', 400);
        }
        oDivArray[2].onclick = function (){
            startMove(this, 'opacity', 50);
        }
        oDivArray[3].onclick = function (){
            startMove(this, 'borderWidth', 40);
        }



        function getStyle (dom, attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom,null)[attr];

            }else{
                return dom.currentStyle[attr];
            }
        }

        //写startMove的函数,使得方法可以引用
        // 可以将指定的属性传进来
        function startMove(dom,attr ,target){
            clearInterval(dom,timer);
            var iSpeed = null ,iCur = null;
            dom.timer = setInterval(function(){
                if(attr == 'opacity'){
                    iCur = parseFloat(getStyle(dom,attr) ) *100;
                }else{
                    iCur = parseInt(getStyle(dom,attr));
                }
                // target为目标点
                iSpeed = (target - iCur) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                if(iCur == target){
                    clearInterval(dom.timer);
                    // 清零
                }
                if (attr == 'opacity'){
                    dom.style.opacity = (iCur + iSpeed )/100;
                }else{
                    dom.style[attr] = iCur + iSpeed + 'px';
                }
            },30)
        }
	</script>
</body>    

7.多物体多只运动+回调机制

<head>
	<style>
        div{
            position:absolute;
            left:0px;
            width:100px;
            height:100px;
            opacity:1;
            background-color:red;
        }
        #topDiv{
            top:200px;
        }
        #bottomDiv{
            top:400px
        }
    </style>
</head>
<body>
    <!--  同一个物体同时发生多个变化 -->
    <div id="topDiv"></div>
    <div id="bottomDiv"></div>


    <script>
    
    //width :100-->400   height:100-->400  left:0 -->200  top:200-->300  opacity :1-->0.5
    //最好的传入方式
    var oTopDiv = document.getElementById('topDiv');
        var oBottomDiv = document.getElementById('bottomDiv');
        oTopDiv.onclick = function () {
            startMove(this, {width: 400, height: 400, left: 200, top: 300, opacity: 50}, function () {
                startMove(oBottomDiv, {width: 400, height: 400, left: 200, top: 300, opacity: 50}, function () {
                    alert('over');
                })
            })
        }


    function getStyle(dom,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(dom,null)[attr];
        }else{
            return dom,currentStyle[attr];
        }
    }
    //callback调回机制
    function startMove (dom,attrObj,callback){
        clearInterval(dom.timer);
        var iSpeed = null, iCur = null;
        dom.timer = setInterval(function(){
            var bStop = true;
            for(var attr in attrObj){
                if(attr == 'opacity'){
                    iCur = parseFloat(getStyle(dom,attr)) *100;
                }else{
                    iCur = parseInt(getStyle(dom,attr));
                }
                // target为目标点
                iSpeed = (attrObj[attr] - iCur) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                
                if (attr == 'opacity'){
                    dom.style.opacity = (iCur + iSpeed )/100;
                }else{
                    dom.style[attr] = iCur + iSpeed + 'px';
                }
                if(iCur != attrObj[attr]){
                    bStop = false;
                }
            }
            if(bStop){
                clearInterval(dom.timer);
                typeof callback == 'function'&& callback();
                // &&前的数为true时,才执行后面
            }
        },30)
    }
    </script>
</body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

outside-R

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值