JS 实现 Div 向上浮动

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

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

Html 及 JS 代码如下:

<div id="newsOne" onmouseover="CleartTimeInterVal();" onmouseout="resetInterVal();"
       style="position: absolute; width: 100px;">
       <a href="http://www.baidu.com" target="_blank">test Div</a>
   </div>
   <script type='text/javascript'>

       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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值