JavaScript字幕滚动效果
其中要注意的:overflow:hidden,否則會(huì)全部顯示,達(dá)不到效果。
?
使用時(shí)可以對(duì)ul.scrollTop >= 195這一句的數(shù)字進(jìn)行設(shè)置。達(dá)到平滑過渡的作用。
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>無標(biāo)題頁(yè)</title> </head> <body> <form id="form1" runat="server"> <div> <ul id="scroll" style="overflow:hidden;height:100px;width:200px"> <li>滾動(dòng)效果一</li> <li>滾動(dòng)效果二</li> <li>滾動(dòng)效果三</li> <li>滾動(dòng)效果四</li> <li>滾動(dòng)效果五</li> <li>滾動(dòng)效果六</li> <li>滾動(dòng)效果七</li> <li>滾動(dòng)效果八</li> <li>滾動(dòng)效果九</li> <li>滾動(dòng)效果十</li> <li>滾動(dòng)效果一</li> <li>滾動(dòng)效果二</li> <li>滾動(dòng)效果三</li> <li>滾動(dòng)效果四</li> <li>滾動(dòng)效果五</li> <li>滾動(dòng)效果六</li> <li>滾動(dòng)效果七</li> <li>滾動(dòng)效果八</li> <li>滾動(dòng)效果九</li> <li>滾動(dòng)效果十</li> </ul> <mce:script type="text/javascript"><!-- var ul = document.getElementById("scroll"); function charlist(){ ul.scrollTop++; if (ul.scrollTop >= 195) { ul.scrollTop = 0; } } var intval = setInterval(charlist,60); ul.onmousemove = function(){ clearInterval(intval); } ul.onmouseout = function(){ intval = setInterval(charlist,60); } // --></mce:script> </div> </form> </body> </html>
轉(zhuǎn)載于:https://www.cnblogs.com/Joyin/archive/2010/05/02/2262125.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript字幕滚动效果的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 数据库 ACCESS与SQL SERVE
- 下一篇: 【javascript】函数调用的对象和