<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< ></ >
<style>
.box{
width: 100px;
height: 100px;
position: absolute;
left:300.54px;
background: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
< >
var box=document.getElementById("box");
/*
left top 可以设置小数数值
并且获取得到的时候也可以得到小数数值
offsetLeft 获取的只能是整数！！
弹性运动不能用于样式不能为负数的
比如height padding
*/
function elasticSport(obj,oTarget){
obj.timer=null;//定时器
obj.oSpeed=0;//速度
obj.left=0; //left
clearInterval(obj.timer);
obj.timer=setInterval(function(){
obj.oSpeed+=(oTarget-obj.offsetLeft)/5;
//摩擦力 总是会停止
obj.oSpeed*=0.7;
obj.left+=obj.oSpeed;
//速度足够小 当前位置足够接近目标位置 停止计时器
if(Math.abs(obj.oSpeed<1) && Math.abs(obj.left-oTarget)<1){
clearInterval(obj.timer);
obj.style.left=oTarget+"px";
}
else{
obj.style.left=obj.left+"px";
}
document. =obj.offsetLeft+" | 300";
},1000/60);
}
elasticSport(box,300);
</ >
</body>
</html>
继续阅读与本文标签相同的文章
更智能的苹果手表
-
《Android进阶解密》| 每日读本书
2026-05-18栏目： 教程
-
watchbog再升级，企业黄金修补期不断缩小，或面临蠕虫和恶意攻击
2026-05-18栏目： 教程
-
阿里巴巴资深技术专家雷卷：值得开发者关注的 Java 8 后时代的语言特性| 9月9号栖夜读
2026-05-18栏目： 教程
-
3年Java开发6个点搞定高并发系统面试疑惑
2026-05-18栏目： 教程
-
请求支援！我被“非结构化数据包围了” | 开发者必读（060期）
2026-05-18栏目： 教程