JS 实现Div向上浮动的实现代码

2019-12-24,

Html 及 JS 代码如下:
复制代码 代码如下:
<div id="newsOne" onmouseover="CleartTimeInterVal();" onmouseout="resetInterVal();"
style="position: absolute; width: 100px;">
<a href="//www.jb51.net" target="_blank">北冥有鱼</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>

在线运行:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

  • JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
  • JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
  • js实现网站最上边可关闭的浮动广告条代码
  • JS实现侧悬浮浮动实例代码
  • js浮动图片的动态效果
  • js页面滚动时层智能浮动定位实现(jQuery/MooTools)
  • JS模拟Dialog弹出浮动框效果代码

《JS 实现Div向上浮动的实现代码.doc》

下载本文的Word格式文档,以方便收藏与打印。