用js实现div元素向右平滑移动300px，耗时1秒，不能使用transition

最新推荐文章于 2023-02-07 11:19:38 发布

AF01

最新推荐文章于 2023-02-07 11:19:38 发布

阅读量3.4k

点赞数 4

文章标签： vue.js javascript node.js

本文链接：https://blog.youkuaiyun.com/songJunFeng1/article/details/121646125

版权

JavaScript 动画绝对定位事件处理 setTimeout

关键词由优快云通过智能技术生成

这篇博客通过一个简单的HTML和JavaScript示例展示了如何点击页面时让一个黑色方块进行绝对定位的平移动画。代码中，点击事件触发后，设置方块为绝对定位，并通过setTimeout实现逐帧改变left属性，产生动画效果。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>简单位移动画</title>
<style>
</style>
</head>

<body>

<div id="element" style="width: 200px; height: 200px; background: #000">我是个方块</div>



<script>

    // 请写下你的代码
    var div = document.getElementById('element'); 
    document.onclick = function(){
        div.style.position = 'absolute';
        for (let index = 0; index < 300; index++) {
            setTimeout(()=>{
                div.style.left =  index+1 + 'px';
            },index*10/3)
        }
    }

</script>

</body>

</html>