js缓冲运动和匀速运动

来源：互联网发布：linux ll命令输出内容编辑：程序博客网时间：2024/05/18 00:31

1.缓冲运动

<span style="font-size:12px;"><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>js缓冲运动</title>    <style>        #div1{            height: 100px;            width: 100px;            background-color: red;            position: absolute;            left: 0px;/*700px*/            top: 100px;        }        #span1{            position: absolute;            left: 500px;            top: 0;            height: 500px;            width: 1px;            background-color: #000;        }    </style>    <script>        window.onload=function(){            var oInput=document.getElementById("input1");            var oDiv=document.getElementById("div1");            var timer=null;            function startMove(iTarget){                clearInterval(timer);                timer=setInterval(function(){                    var iSpeed=(iTarget-oDiv.offsetLeft)/8;//缓冲运动速度                    if(iSpeed>0){                        iSpeed=Math.ceil(iSpeed);                    }else{                        iSpeed=Math.floor(iSpeed);                    }                    if(oDiv.offsetLeft==500){                        clearInterval(timer);                    }else{                        oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';                    }                },30)            };            oInput.onclick=function(){                startMove(500);            }        }    </script></head><body><input type="button" id="input1" value="开始运动" /><div id="div1"></div><span id="span1"></span></body></html></span>

2.匀速运动

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>js匀速运动</title>    <style>        #div1{            height: 100px;            width: 100px;            background-color: red;            position: absolute;            left: 0px;/*700px*/            top: 100px;        }        #span1{            position: absolute;            left: 500px;            top: 0;            height: 500px;            width: 1px;            background-color: #000;        }    </style>    <script>        window.onload=function(){            var oInput=document.getElementById("input1");            var oDiv=document.getElementById("div1");            var timer=null;            function startMove(iTarget){                clearInterval(timer);                timer=setInterval(function(){                    var iSpeed=iTarget>oDiv.offsetLeft>0?7:-7;//                    if(iTarget>oDiv.offsetLeft){//                        iSpeed=7//                    }else{//                        iSpeed=-7;//                    }                    if(Math.abs(oDiv.offsetLeft-iTarget)<=7){                        oDiv.style.left=iTarget+'px';                        clearInterval(timer);                    }else{                        oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';                    }                },30)            };            oInput.onclick=function(){                startMove(500);            }        }    </script></head><body><input type="button" id="input1" value="开始运动" /><div id="div1"></div><span id="span1"></span></body></html>

0 0