JS 实现 Div 向上浮动

最新推荐文章于 2025-07-01 16:31:37 发布

转载最新推荐文章于 2025-07-01 16:31:37 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Roy_Cao/archive/2012/10/11/2719517.html

文章标签：

#前端 #ViewUI

这篇博客介绍了如何使用JavaScript实现一个Div元素随着鼠标悬停和离开而进行向上滚动的效果。通过设置Div的样式和使用定时器interval动态更新其bottom属性，达到滚动动画的目的。代码中包含两个函数CleartTimeInterVal和resetInterVal，分别用于停止和重新启动滚动动画。

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

Html 及 JS 代码如下：

var newsOne = document.getElementById("newsOne");

       newsOne.style.bottom = 0;
       newsOne.style.left = window.screen.availWidth - 100;
       var bottom = 0;
       function newsScroll() {
           if (bottom > (window.screen.availHeight - window.screenTop)) {
                       bottom = 0;
               newsOne.style.bottom = 0;

}
else {

               bottom = bottom + 15;
               newsOne.style.bottom = bottom;
           }

}

var timeid = setInterval(newsScroll, 300);

       function CleartTimeInterVal() {
           clearInterval(timeid);
       }
       function resetInterVal() {
           timeid = setInterval(newsScroll, 300);
       }

</script>

转载于:https://www.cnblogs.com/Roy_Cao/archive/2012/10/11/2719517.html