js实现缓冲运动

最新推荐文章于 2020-03-19 08:33:25 发布

原创最新推荐文章于 2020-03-19 08:33:25 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

40 篇文章

订阅专栏

23 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的缓冲运动效果，通过调整运动对象的offsetLeft属性，并结合定时器和速度计算，使得元素在鼠标悬停时平滑移动到指定位置。详细解释了运动过程中的关键步骤，包括获取初始位置、设定运动速度、更新位置以及临界值判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>缓冲运动</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
#div1{
width:200px;
height:200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top:75px;
}
</style>
<!-- 缓冲运动
1、获取运动对象的offsetLeft
设置定时器
2、定义运动速度（*）
3、改变运动对象的offsetLeft
4、临界值判断（*）

-->
<script type="text/javascript">
window.onload = function(){
var div1 = document.getElementById('div1');
div1.onmouseover = function(){
move(div1,0);
}

div1.onmouseout = function(){
move(div1,-200);
}
}
var timer = null;
var speed = 0;
/*
obj运动对象
stopPoint停止点
*/
function move(obj,stopPoint){
//var div1 = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){

if(stopPoint >= 0){
speed = Math.ceil((stopPoint-obj.offsetLeft)/7);
}else{
speed = Math.floor((stopPoint-obj.offsetLeft)/7);
}
console.log(speed);

//临界值判断，当运动到临界值时停止清除定时器
if(obj.offsetLeft == stopPoint){
clearInterval(timer);
}else{
obj.style.left = obj.offsetLeft+speed+'px'; //运动
}

},30);
}
</script>
</head>
<body>
<div id="div1">
<span id="share">分享</span>
</div>

</div>
</body>
</html>

匀速运动的时候就是固定运动速度的值