js缓速运动

最新推荐文章于 2024-07-20 04:38:59 发布

weixin_34161032

最新推荐文章于 2024-07-20 04:38:59 发布

阅读量132

点赞数

原文链接：http://www.cnblogs.com/dream-w/p/4884770.html

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style>
*{margin:0;padding:0;}
#w{width:200px;height:200px;background:#ccc;overflow:hidden;position:relative;left:0px;}
#w1{width:400px;height:200px;}
</style>
<script>
window.onload=function(){
    var oDiv=document.getElementById("w");
    var oDiv1=document.getElementById("w1");
    var oIput=document.getElementById("btn");
    var oTxt=document.getElementById("txt");
    var speed=0;
    var timer=null;//timer=setInterval(sMove,1000);
    
    /*减速运动*/
    
    function mMove(target){
        speed=(target-oDiv.offsetLeft)/8;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        if(oDiv.offsetLeft==target){

            clearInterval(timer);
            console.log("计时器停止"+speed);
            
        }else{
            oDiv.style.left=oDiv.offsetLeft+speed+"px";
            console.log("speed="+speed);
            console.log("oDiv.offsetLeft="+oDiv.offsetLeft);
        }
    }
    oIput.οnclick=function(){
        timer=setInterval(function(){mMove(oTxt.value)},100);
    };

};
</script>
<body>
<input type="button" value="button" id="btn" />
<input  type="text" id="txt" />
<div id="w">
    <div id="w1"></div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/dream-w/p/4884770.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34161032

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js缓速运动

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><style>*{margin:0;padding:0;}#w{width:200px;height:200px;background:...
复制链接

扫一扫