分享到—setInterval（js）

最新推荐文章于 2025-06-07 12:48:06 发布

原创最新推荐文章于 2025-06-07 12:48:06 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript实例专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用JavaScript封装的移动效果函数，通过设置速度和总路程作为参数，利用定时器实现元素在页面上的平滑移动。当鼠标悬停于指定元素上时，元素将向左移动至初始位置；当鼠标离开时，元素则返回到默认偏移位置。

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

“分享到” ：效果的封装函数（定时器实现移动）

/*封装上述函数——开始*/
var timer=null;                     //注意：timer写在外面，我觉得的
var Move=function (v,s) {           //速度和总路程这两个变化的设为参数
    var owrap=document.getElementById("wrap")
    clearInterval(timer);
    timer=setInterval(function () {
        var iSpeed=v;
        if(owrap.offsetLeft==s){
            clearInterval(timer)
        }else{
            owrap.style.left=owrap.offsetLeft+iSpeed+"px";
        }
    },30)
}
/*封装上述函数——结束*/

window.onload=function () {               //用封装函数
    var div=document.getElementById("wrap")
    div.onmouseover=function () {
        Move(10,0)
    }
    div.onmouseout=function () {
        Move(-10,-100)
    }
}