JS中简单的滑动特效

东郭鸿福
2023-12-01

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>
 类似资料: