JS实现Li列表的无缝垂直文字滚动代码

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 链接文字 -> JS实现Li列表的无缝垂直文字滚动代码

JS实现Li列表的无缝垂直文字滚动代码

作者:admin 发布时间:2010-11-27 8:58:50 发布人: admin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<title>JS实现Li列表的无缝垂直文字滚动代码</title>
<style type="text/css">
*{padding:0; margin:0;}
#roll{ border:1px solid red;height:100px; margin:10px auto; width:350px; overflow:hidden;list-style:none;}
#roll li{height:30px; padding-left:10px;line-height:30px; border-bottom:1px solid #ddd;}
a{font-size:12px; text-decoration:none; font-family:'宋体';}
</style>
</head>
<body>
  <ol id="roll">
<li>
<a title="超级漂亮的几款清新、常用的网页CSS布局配色实例" target="_blank" href="#">
超级漂亮的几款清新、常用的网页CSS布局配色实例</a></li>
<li>
<a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="#">
CSS制作斜角上有背景图片的Div层</a></li>
<li>
<a title="Js实现的层展开、层折叠效果，默认时候层是折叠的" target="_blank" href="#">
Js实现的层展开、层折叠效果，默认时候层是折叠的</a></li>
<li>
<a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="#">
DIV始终固定在网页右下角位置的CSS实现方法</a></li>
<li>
<a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="#">
JavaScript未知高度元素的垂直居中的方法</a></li>
<li>
<a title="渐变彩色的文字" target="_blank" href="#">
渐变彩色的文字</a></li>
<li>
<a title="指定文字逐条显示" target="_blank" href="#">
指定文字逐条显示</a></li>
<li>
<a title="滚动的标题栏" target="_blank" href="#">
滚动的标题栏</a></li>
<li>
<a title="JS 4屏平滑滚动幻灯片特效" target="_blank" href="#">
JS 4屏平滑滚动幻灯片特效</a></li>
<li>
<a title="图片的无缝滚动（纵向、横向）" target="_blank" href="#">
图片的无缝滚动（纵向、横向）</a></li>
<li>
<a title="鼠标触及带边框的菜单" target="_blank" href="#">
鼠标触及带边框的菜单</a></li>
<li>
<a title="比较实用的CSS控制链接颜色效果" target="_blank" href="#">
比较实用的CSS控制链接颜色效果</a></li>
  </ol>
  <div id="bug"></div>
</body>
<script type="text/javascript">
(function(A){
   function _ROLL(obj){
      this.ele = document.getElementById(obj);
   this.interval = false;
   this.currentNode = 0;
   this.passNode = 0;
   this.speed = 100;
   this.childs = _childs(this.ele);
   this.childHeight = parseInt(_style(this.childs[0])['height']);
       addEvent(this.ele,'mouseover',function(){
                                   window._loveYR.pause();
           });
    addEvent(this.ele,'mouseout',function(){
                                   window._loveYR.start(_loveYR.speed);
           });
   }
   function _style(obj){
     return obj.currentStyle || document.defaultView.getComputedStyle(obj,null);
   }
   function _childs(obj){
   var childs = [];
   for(var i=0;i<obj.childNodes.length;i++){
   var _this = obj.childNodes[i];
   if(_this.nodeType===1){
   childs.push(_this);
   }
   }   
   return childs;
   }
 function addEvent(elem,evt,func){
    if(-[1,]){
     elem.addEventListener(evt,func,false);   
    }else{
     elem.attachEvent('on'+evt,func);
    };
 }
 function innerest(elem){
      var c = elem;
   while(c.childNodes.item(0).nodeType==1){
       c = c.childNodes.item(0);
   }
   return c;
 }
   _ROLL.prototype = {
      start:function(s){
           var _this = this;
     _this.speed = s || 100;
        _this.interval = setInterval(function(){
          _this.ele.scrollTop += 1;
       _this.passNode++;
       if(_this.passNode%_this.childHeight==0){
          var o = _this.childs[_this.currentNode] || _this.childs[0];
          _this.currentNode<(_this.childs.length-1)?_this.currentNode++:_this.currentNode=0;
          _this.passNode = 0;
          _this.ele.scrollTop = 0;
          _this.ele.appendChild(o);
       }
        },_this.speed);
   },
   pause:function(){
   var _this = this;
      clearInterval(_this.interval);
   }
   }
    A.marqueen = function(obj){A._loveYR = new _ROLL(obj); return A._loveYR;}
})(window);
marqueen('roll').start(100/*速度默认100*/);
</script>

</html>

非Table模式的新闻列表滚动，学习CSS的朋友可能都能做出这种效果来。运用了CSS中的Li列表标签，加上javaScript代码控制，完成完美的无缝滚动效果。在兼容性方面，在ie6,7,8,9,firefox等主流浏览器下均测试通过，用的时候您只需改变一下样式和大小，再将Js封装起来，用时候调用，就更简洁了，相信这款实用的文字滚动正是你需要的。

将本文收藏到QQ书签与更多好友分享

上一篇：文章：文字从页面顶部掉下来下一篇：文章：利用CSS的Clip属性来创造多彩文字

网页特效

JS实现Li列表的无缝垂直文字滚动代码

本类浏览排行 »

本站推荐文章 »