您的位置：首页 > Web前端 > JavaScript

js缓速运动

2015-10-16 11:20 549 查看

<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.onclick=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航