JS中简单的滑动特效

最新推荐文章于 2024-04-28 18:13:10 发布

明天早晨喝牛奶

最新推荐文章于 2024-04-28 18:13:10 发布

阅读量3.7k

点赞数 3

分类专栏： js事件集中营文章标签： javascript

本文链接：https://blog.csdn.net/qq_40289292/article/details/78226328

版权

js事件集中营专栏收录该内容

11 篇文章 0 订阅

订阅专栏

window.onload = function(){

这句代码指的是：当整个窗体加载结束后，才执行大括号中的代码。
这篇代码中用到了JS中的点击事件onclick，及时当该标签范围内元素被鼠标点击的时候，发生的事件。
a = document.getElementById(“a”);
这句代码指的是：提取文档（document）中的标签元素的id为a的标签，赋给变量a.
setInterval(“方法”，每隔多少毫秒启动“方法”)；//该计时器有循环
setTimeout（“方法”，每隔多少毫秒启动“方法”）；//该计时器没有循环
clearInterval(set_id);
结束计时器set_id，将需要结束的计时器赋给一个变量值，set_id。通过clearInterval,和clearTimeOut来清除计时器。（计时器用完后需要被清除，不然会消耗资源，产生BUG）



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #a{
                border: 1px solid #000000;
                width: 100px;
                height: 100px;
                position: absolute;
                overflow: hidden;
            }
            #a img{
                position: absolute;
                top:-52px;
                left: -42px;
            }
        </style>
        <script>
            var i = 0;
            var set_id;
            window.onload = function(){
                var a = document.getElementById("a");

                a.onclick = function(){

                    set_id = setInterval(function(){
                        if(i >= 300){
                            clearInterval(set_id);
                        }
                        i+=10;
                        var str = i+"px";
                        a.style.left = str;
                    },10);

                }

            }
        </script>
    </head>
    <body>
        <div id="a">
            <img src="img/mouse.png" />
        </div>
    </body>
</html>