文章导航

JavaScript垂直新闻公告无缝滚动详解

2017-10-23 01:12| 作者: admin| 查看: 3147| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,它实现了新闻列表无缝垂直滚动效果。

这样的效果通常出现在新闻公告类似的功能模块。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type=text/css>
#demo {
  overflow:hidden;
  height:132px;
  width:350px; 
  border:1px solid #dde5bc;
}
#demo a {
  width: 100%;
  overflow: hidden;
  font: 12px/16px tahoma;
  display: block;
  text-decoration: none;
  margin: 2px;
  color: #4a551c;
  padding-left: 2px;
  text-align: left;
}
#demo a:hover {
  color: #ff6600;
}
</style>
<script>
window.onload=function(){
  var speed = 16
  var demo = document.getElementById("demo");
  var demo2 = document.getElementById("demo2");
  var demo1 = document.getElementById("demo1");
  demo2.innerHTML = demo1.innerHTML;
 
  function Marquee() {
    if (demo2.offsetTop - demo.scrollTop <= 0) {
      demo.scrollTop -= demo1.offsetHeight
    }
    else {
      demo.scrollTop++
    }
  }
 
  var MyMar = setInterval(Marquee, speed)
  demo.onmouseover = function () {
    clearInterval(MyMar)
  }
  demo.onmouseout = function () {
    MyMar = setInterval(Marquee, speed)
  }
}
</script>
</head>
<body>
<div id="demo">
  <div id="demo1">
    <a href="#">蚂蚁部落欢迎您,只有努力才会有美好未来</a>
    <a href="#">本站的url地址是softwhy.com</a>
    <a href="#">只有努力奋斗才会有美好的未来。</a>
    <a href="#">没有人一开始就是高手,必须要通过自身努力额</a>
    <a href="#">每一天都是新的,必须要好好的珍惜。</a>
    <a href="#">本站的宗旨就是分享前端基础知识</a>
    <a href="#">分享和互助式进步最大的原动力</a>
    <a href="#">要珍惜当下的时间,只有当下才是最现实的</a>
    <a href="#">对自己有一个清晰的定位要胜过于其他人的任何赞誉</a>
    <a href="#">前端是一个更新很快的行业</a>
    <a href="#">es6已经公布欢迎大家学习</a>
    <a href="#">css3很快就成为主流了</a>
  </div>
  <div id="demo2"></div>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload=function(){},当网页内容完全加载完毕再去执行函数中的代码。

(2).var speed = 40,用来规定定时器函数执行的间隔,其实也就是规定的滚动的速度。

(3).var demo = document.getElementById("demo"),获取id属性值为demo的元素对象。

(4).var demo2 = document.getElementById("demo2"),获取id属性值为demo2的元素对象。

(5).var demo1 = document.getElementById("demo1"),获取id属性值为demo1的元素对象。

(6).demo2.innerHTML = demo1.innerHTML,将demo1元素中的所有内容赋值给demo2。

(7).function Marquee() {},此函数可以实现元素的垂直位移效果。

(8).if (demo2.offsetTop - demo.scrollTop <= 0) ,判断demo2元素距离body的距离和demo元素向上滚动的距离之差是否小于等于0。其实就是判断demo1元素是否已经因为向上滚动已经完全隐藏。

(9).demo.scrollTop -= demo1.offsetHeight,重置为最初滚动开始的状态。

(10).else {

  demo.scrollTop++

},否则的话,继续向上滚动。

(11).var MyMar = setInterval(Marquee, speed),使用定时器函数调用Marquee函数。

(12).demo.onmouseover = function () {

  clearInterval(MyMar)

},当鼠标悬浮,停止定时器函数的执行,那么也就停止滚动了。

(13).demo.onmouseout = function () {

  MyMar = setInterval(Marquee, speed)

},当鼠标离开,继续滚动效果。

二.相关阅读:

(1).document.getElementById()方法参阅document.getElementById()一章节。

(2).innerHTML属性参阅JavaScript innerHTML一章节。

(3).offsetTop参阅JavaScript offsetTop一章节。

(4).scrollTop参阅JavaScript scrollTop一章节。

(5).offsetHeight参阅JavaScript offsetHeight一章节。

(6).setInterval()参阅JavaScript setInterval()一章节。

(7).onmouseover事件参阅JavaScript mouseover事件一章节。

(8).onmouseout事件参阅JavaScript mouseout事件一章节。

(9).clearInterval()参阅JavaScript clearInterval()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部