Js动画效果之盒子滚动（JavaScript)

最新推荐文章于 2023-02-15 15:40:01 发布

find-g

最新推荐文章于 2023-02-15 15:40:01 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 笔记文章标签： html css js javascript html5

本文链接：https://blog.csdn.net/mxjwxhn/article/details/107813919

版权

笔记同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

效果图1:
效果图2：
源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            /* 必须加定位才可以动 */
            position: absolute;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <script>
        // 动画原理：
        // 1.获得盒子当前位置
        // 2.让盒子在当前位置加上2px 的移动距离
        // 3.利用定时器不断重复中国操作
        // 4.接触定时器
        // 5.注意添加定位，才可以使用element.style.left
        var box1 =document.querySelector('.box1') // 获取事件源
        var timer = setInterval(function(){
           if( box1.offsetLeft >= 500){
               clearInterval(timer); // 清除定时器
           }else{
                // 每50毫秒就将新的值给box1.left
                box1.style.left  = box1.offsetLeft +2 +'px';
           }
        },50)
    </script>
</body>
</html>

喜欢的朋友记得点赞转发关注噢~~~

find-g

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Js动画效果之盒子滚动（JavaScript)

效果图1:效果图2：源代码如下：```javascript<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>..
复制链接

扫一扫