js 设置任意的一个元素,移动到指定的目标位置(X)

最新推荐文章于 2024-07-12 12:03:01 发布

看到了你

最新推荐文章于 2024-07-12 12:03:01 发布

阅读量5.5k

点赞数 1

分类专栏： js 文章标签： js 移动

本文链接：https://blog.csdn.net/chen1042246612/article/details/88289756

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
/*脱离文档流*/
position: absolute;
}
</style>
<script>

//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 20);
}

</script>
</head>
<body>

</body>
</html>

看到了你

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js 设置任意的一个元素,移动到指定的目标位置(X)

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;title&lt;/title&gt; &lt;style&gt; div{ width: 200px; height: 200px;
复制链接

扫一扫

专栏目录