<!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> <title>一款JS+CSS打造的新闻列表向上无缝滚动效果丨技术教程网丨www.update8.com</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="http://www.csrcode.cn/html/txdm/tcys/1061.htm"> 超级漂亮的几款清新、常用的网页CSS布局配色实例</a></li> <li> <a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1060.htm"> CSS制作斜角上有背景图片的Div层</a></li> <li> <a title="Js实现的层展开、层折叠效果，默认时候层是折叠的" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1059.htm"> Js实现的层展开、层折叠效果，默认时候层是折叠的</a></li> <li> <a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1058.htm"> DIV始终固定在网页右下角位置的CSS实现方法</a></li> <li> <a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1057.htm"> JavaScript未知高度元素的垂直居中的方法</a></li> <li> <a title="渐变彩色的文字" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1056.htm"> 渐变彩色的文字</a></li> <li> <a title="指定文字逐条显示" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1055.htm"> 指定文字逐条显示</a></li> <li> <a title="滚动的标题栏" target="_blank" href="http://www.csrcode.cn/html/txdm/qtdm/1054.htm"> 滚动的标题栏</a></li> <li> <a title="JS 4屏平滑滚动幻灯片特效" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1036.htm"> JS 4屏平滑滚动幻灯片特效</a></li> <li> <a title="图片的无缝滚动（纵向、横向）" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1035.htm"> 图片的无缝滚动（纵向、横向）</a></li> <li> <a title="鼠标触及带边框的菜单" target="_blank" href="http://www.csrcode.cn/html/txdm/cddh/1034.htm"> 鼠标触及带边框的菜单</a></li> <li> <a title="比较实用的CSS控制链接颜色效果" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1032.htm"> 比较实用的CSS控制链接颜色效果</a></li> <li> <a title="鼠标接触或者离开图片时，图片大小会相应变化" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1031.htm"> 鼠标接触或者离开图片时，图片大小会相应变化</a></li> <li> <a title="特殊的鼠标悬停提示" target="_blank" href="http://www.csrcode.cn/html/txdm/sbtx/1028.htm"> 特殊的鼠标悬停提示</a></li> <li> <a title="CSS Sprite制作的鼠标感应网站导航条" target="_blank" href="http://www.csrcode.cn/html/txdm/cddh/1027.htm"> CSS Sprite制作的鼠标感应网站导航条</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> <br> 非Table模式的新闻列表滚动，学习CSS的朋友可能都能做出这种效果来。运用了CSS中的Li列表标签，加上javaScript代码控制，完成完美的无缝滚动效果。在兼容性方面，在ie6,7,8,9,firefox等主流浏览器下均测试通过，用的时候您只需改变一下样式和大小，再将Js封装起来，用时候调用，就更简洁了，相信这款实用的文字滚动正是你需要的。<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.update8.com" target="_blank">技术教程网</a>丨update8.com 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p> <div style="width:728px;margin:10px auto; overflow:hidden;"> <script src='/plus/ad_js.php?aid=10023' language='javascript'></script> </div> </html> (www.update8.com)提示：可修改后代码再运行!
