新闻公告具有时间间隔垂直滚动代码

快乐打工仔 分类:实例代码

一般企业网站都有公告功能模块,有些公告新闻是横向的,有的是垂直的,本章节就通过一个实例介绍一下如何实现具有时间间隔的垂直滚动代码,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>新闻公告具有时间间隔垂直滚动代码-犀牛前端部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
li {
  list-style:none;
}
#callboard {
  width:600px;
  margin:100px auto 0;
  height:24px;
  line-height:24px;
  overflow:hidden;
  font-size:12px;
  background-color:#f5f5f5;
}
#callboard ul {
  padding:0;
}
#callboard li {
  padding:0;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
(function (win){ 
  var callboarTimer; 
  var callboard=$('#callboard'); 
  var callboardUl=callboard.find('ul'); 
  var callboardLi=callboard.find('li'); 
  var liLen=callboard.find('li').length; 
  var initHeight=callboardLi.first().outerHeight(true); 
  win.autoAnimation=function(){ 
    if(liLen<=1) {
      return;
    } 
    var self=arguments.callee; 
    var callboardLiFirst=callboard.find('li').first(); 
    callboardLiFirst.animate({ 
      marginTop:-initHeight 
    }, 500, function (){ 
      clearTimeout(callboarTimer); 
      callboardLiFirst.appendTo(callboardUl).css({marginTop:0}); 
      callboarTimer = setTimeout(self, 5000); 
    })
  } 
  callboard.mouseenter( 
   function (){ 
     clearTimeout(callboarTimer); 
   }).mouseleave(function (){ 
     callboarTimer = setTimeout(win.autoAnimation, 5000); 
   }) 
}(window)); 
setTimeout(window.autoAnimation, 5000);  
})
</script>
</head>
<body>
<div id="callboard">
  <ul>
    <li> <span style="color:red;">犀牛前端部落欢迎您</span> </li>
    <li> <span style="color:red;">每一天都是新的,请珍惜</span> </li>
    <li style="margin-top: 0px;">只有奋斗才会有美好的明天</li>
  </ul>
</div>
</body>
</html>

以上代码实现了我们想要的效果,下面就介绍一下它的实现过程。

一.实现原理:

autoAnimation通过animate调整ul元素中第一个li元素的margintop属性值,调整的大小刚好是第一个li元素的高度,这样第一个li元素就会向上滚动逐渐被隐藏,第二个li元素也会逐渐被显示,然后再将第一个元素挪动到ul元素内部的最后面,通过setTimeout方法每5秒递归调用一次autoAnimation,这样不断的重复就实现滚动效果。

二.代码注释:

(1).$(document).ready(function(){}),文档结构完全加载完毕再去执行函数中的代码。

(2).(function(win){})(window),创建并执行一个函数,参数为window对象。

(3).var callboarTimer,声明一个变量,用于存储setTimeout()函数的返回值。

(4).var callboard=$('#callboard'),获取id属性值为callboard'的对象。

(5).var callboardUl=callboard.find('ul'),获取callboard下的所有ul对象集合。

(6).var callboardLi=callboard.find('li'),获取callboard下的所有li对象集合。

(7).var liLen=callboard.find('li').length,获取li元素的数量。

(8).var initHeight=callboardLi.first().outerHeight(true),获取第一个li元素的高度,外边距计算在内。

(9).win.autoAnimation=function(){},此函数用来实现向上滚动效果。

(10).if(liLen<=1){return;},如果li元素的个数小于等于1,那就不用滚动了。

(11).var self=arguments.callee,将当前函数对象的引用赋值给self变量。

(12).var callboardLiFirst=callboard.find('li').first(),获取第一个li元素。

(13). callboardLiFirst.animate({}),在500毫秒内调整margintop属性值,这样第一个li就会被隐藏,第二个li就会被显示出来,在margin-top调整完毕之后,将第一个li元素位置放置于ul元素的内部的最后面,最后5秒之后再调用autoAnimation函数,以此往复循环,这样就是先了不断的滚动效果。

(14).callboard.mouseenter(function(){clearTimeout(callboarTimer); }),注册mouseenter事件处理函数,鼠标放在div上滚动停止。

(15).mouseleave(function (){ callboarTimer=setTimeout(win.autoAnimation, 5000); }) ,注册mouseleave事件处理函数,当鼠标离开时,继续开始滚动。

(16). setTimeout(window.autoAnimation,5000);  5秒后调用autoAnimation函数。

三.相关阅读:

(1).find()参阅jQuery find()方法一章节。

(2).outerHeight()参阅jQuery outerHeight()方法一章节。

(3).first()参阅jQuery first()方法一章节。

(4).clearTimeout()参阅clearTimeout()方法一章节。

(5).appendTo()参阅jQuery appendTo()方法一章节。

(6).css()参阅jQuery css()方法一章节。

(7).setTimeout()参阅setTimeout()方法一章节。

新闻公告具有时间间隔垂直滚动代码,这样的场景在实际项目中还是用的比较多的,关于新闻公告具有时间间隔垂直滚动代码就介绍到这了。

新闻公告具有时间间隔垂直滚动代码属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容