<html> <head> <title>可控制文字列表上下滚动效果</title> <meta http-equiv="content-type" content="text/html; charset=gbk" /> <style> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin:0;padding:0; font-size:12px;} li{ list-style:none;} ul{ margin:0;} a{ color:#0066CC; text-decoration:none;} a:hover{ color:#FF0000; text-decoration: underline;} .breakNewsblock { margin:0 auto; position:relative; 276px; overflow:hidden; } .breakNewsblock h2 { background:transparent url(/jscss/demoimg/201009/icon.gif) no-repeat scroll 7px -307px; color:#8F1D21; float:left; font-size:12px; padding-left:25px; } .breakNewsblock h2 span{ float:right; padding-right:10px;} #breakNews { background:transparent url(/jscss/demoimg/201009/backbar.gif) no-repeat scroll center top;float:left;height:138px; margin-top:5px; padding:0 0 3px 2px; 275px; } #breakNews .list6 {color:#333333;float:left;height:115px;margin-top:11px;overflow:hidden;240px; padding-left:10px; } #breakNews .list6 li{ padding:3px 0;} #breakNews .hit {float:right;height:24px; margin-top:23px; 17px;} #breakNews .hit span { display:block;float:left;height:13px; margin-bottom:6px;13px;} </style> <script language="javascript" type="text/javascript"> function ScrollText(content,btnPrevious,btnNext,autoStart,timeout,isSmoothScroll) { this.Speed = 10; this.Timeout = timeout; this.stopscroll =false;//是否停止滚动的标志位 this.isSmoothScroll= isSmoothScroll;//是否平滑连续滚动 this.LineHeight = 20;//默认高度。可以在外部根据需要设置 this.NextButton = this.$(btnNext); this.PreviousButton = this.$(btnPrevious); this.ScrollContent = this.$(content); this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;//为了平滑滚动再加一遍 if(this.PreviousButton) { this.PreviousButton.onclick = this.GetFunction(this,"Previous"); this.PreviousButton.onmouseover = this.GetFunction(this,"MouseOver"); this.PreviousButton.onmouseout = this.GetFunction(this,"MouseOut"); } if(this.NextButton){ this.NextButton.onclick = this.GetFunction(this,"Next"); this.NextButton.onmouseover = this.GetFunction(this,"MouseOver"); this.NextButton.onmouseout = this.GetFunction(this,"MouseOut"); } this.ScrollContent.onmouseover = this.GetFunction(this,"MouseOver"); this.ScrollContent.onmouseout = this.GetFunction(this,"MouseOut"); if(autoStart) { this.Start(); } } ScrollText.prototype = { $:function(element) { return document.getElementById(element); }, Previous:function() { this.stopscroll = true; this.Scroll("up"); }, Next:function() { this.stopscroll = true; this.Scroll("down"); }, Start:function() { if(this.isSmoothScroll) { this.AutoScrollTimer = setInterval(this.GetFunction(this,"SmoothScroll"), this.Timeout); } else { this.AutoScrollTimer = setInterval(this.GetFunction(this,"AutoScroll"), this.Timeout); } }, Stop:function() { clearTimeout(this.AutoScrollTimer); this.DelayTimerStop = 0; }, MouseOver:function() { this.stopscroll = true; }, MouseOut:function() { this.stopscroll = false; }, AutoScroll:function() { if(this.stopscroll) { return; } this.ScrollContent.scrollTop++; if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) { this.ScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Speed); } else { if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) { this.ScrollContent.scrollTop = 0; } clearTimeout(this.ScrollTimer); //this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout); } }, SmoothScroll:function() { if(this.stopscroll) { return; } this.ScrollContent.scrollTop++; if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) { this.ScrollContent.scrollTop = 0; } }, Scroll:function(direction) { if(direction=="up") { this.ScrollContent.scrollTop--; } else { this.ScrollContent.scrollTop++; } if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) { this.ScrollContent.scrollTop = 0; } else if(parseInt(this.ScrollContent.scrollTop)<=0) { this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2; } if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) { this.ScrollTimer = setTimeout(this.GetFunction(this,"Scroll",direction), this.Speed); } }, GetFunction:function(variable,method,param) { return function() { variable[method](param); } } } function ignoreError() { return true; } window.onerror = ignoreError; </script> </head> <body> <div class="breakNewsblock"> <h2><a target="_blank" href="#">即时新闻</a></h2> <div id="breakNews"> <ul id="breakNewsList" class="list6"> <li><a href="/jscss/code/2069.shtml" target="_blank">固定元素与浮动元素相结合的CSS范例</a></li> <li><a href="/jscss/code/2068.shtml" target="_blank">Float 左对齐与右对齐交叉布局范例代码</a></li> <li><a href="/jscss/code/2067.shtml" target="_blank">一个CSS居右浮动的实例</a></li> <li><a href="/jscss/code/2056.shtml" target="_blank">响应鼠标三态变化的隔行变色表格</a></li> <li><a href="/jscss/code/2055.shtml" target="_blank">响应鼠标滚动的jQuery动感菜单</a></li> <li><a href="/jscss/code/2064.shtml" target="_blank">方法简单效果好的纯CSS圆角</a></li> <li><a href="/jscss/code/2050.shtml" target="_blank">JavaScript 列出每个星期7天的具体日期</a></li> </ul> <div class="hit"> <span><a style="cursor: pointer;"><img width="11" height="10" id="pre2" alt="上一条" src="/jscss/demoimg/201009/none.gif"/></a></span> <span><a style="cursor: pointer;"><img width="11" height="10" id="next2" alt="下一条" src="/jscss/demoimg/201009/none.gif"/></a></span> </div> </div> </div> <script language="javascript" type="text/javascript"> var scroll2 = new ScrollText("breakNewsList","pre2","next2",true,70,true); scroll2.LineHeight = 24; </script> </body> </html>