JS_功能效果_上下滚动内容

 

按自己的思路,写出最简单的一个版本,可用于ul,ol,dl等相似的标签.

后面还需要添加一些动画效果,比如:第一行渐隐最后消失,第一行高度渐小最后消失等等,之后再继续补充,先在此留个标记.

 

 

主要函数:

 

function ScrollContent(id,interval,stopAble){ if(!document.getElementById(id) ) return; this.scrollBody = document.getElementById(id); this.interval = interval || 3000; this.t = null; this.s = null; this.stopAble = stopAble || 0; } ScrollContent.prototype = { scroll : function(){ var that = this; //处理HTML结构,主要操作部分 var s = function(){ var temp = that.scrollBody.firstChild; while( temp.nodeType != 1){ temp = temp.nextSibling; } var hd = temp; //删除之后可做某些动画效果,使用参数进行配置 that.scrollBody.removeChild(temp); temp = null; that.scrollBody.appendChild(hd); } this.t = setInterval( s , this.interval ); //mouseover时是否停止 if( this.stopAble ){ this.scrollBody.onmouseover = function(){ if( that.t ){ clearInterval( that.t ); } } this.scrollBody.onmouseout = function(){ that.t = setInterval( s , that.interval ); } } } }

 

HTML结构,样式自己写吧

 

<ul id="scroll"> <li>11111111111</li> <li>22222222222</li> <li>33333333333</li> <li>44444444444</li> <li>55555555555</li> <li>66666666666</li> <li>77777777777</li> <li>88888888888</li> <li>99999999999</li> <li>00000000000</li> </ul> <ol id="scrollA"> <li>11111111111</li> <li>22222222222</li> <li>33333333333</li> <li>44444444444</li> <li>55555555555</li> <li>66666666666</li> <li>77777777777</li> <li>88888888888</li> <li>99999999999</li> <li>00000000000</li> </ol> <dl id="scrollB"> <dd>aaaaaaaaaaaa</dd> <dd>bbbbbbbbbbbb</dd> <dd>cccccccccccc</dd> <dd>dddddddddddd</dd> <dd>eeeeeeeeeeee</dd> <dd>ffffffffffff</dd> </dl>