修改好的jquery滾動(dòng)字幕效果實(shí)現(xiàn)代碼

更新時(shí)間：2011年06月22日 00:13:16 作者：

修改好的jquery滾動(dòng)字幕效果，需要的朋友可以參考下。

最終效果圖

源代碼:

<html> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=gb2312"> 
<script src="http://demo.jb51.net/jslib/jquery/jquery.js"></script> 
<script type = "text/javascript"> 
function scroll_news(){ 
var $firstNode = $('#scroll-container li'); 
//得到 i的值 列數(shù) 
var iRow = $('#scroll-container').find('li').length – 1; 
//debugger; 
$(function(){ 
$firstNode.eq(0).fadeOut('slow',function(){ 
$(this).clone().appendTo($(this).parent()).fadeIn('slow'); 
$(this).remove(); 
$firstNode.eq(iRow).hide(); 
}); 
}); 
} 
$(document).ready(function(){ 
go(); 
}); 
function stop(){ 
clearInterval(sn); 
} 
function go(){ 
sn = setInterval('scroll_news()',2000); 
} 
</script> 
<style type="text/css"> 
#scroll-container{border:1px #000 solid;background:#FEC;height:23px;line-height:23px;} 
#scroll-container li{list-style:none;display:none;font-size:12px;} 
li a{color:#F00;text-decoration:none;margin-left:10px;} 
li a:hover{text-decoration:underline;} 
</style> 
</head> 
<body> 
<div id="scroll-container" onMouseOver="stop();" onMouseOut="go();"> 
<li><a href="#">一生這么一次</a></li> 
<li><a href="#">不再因?yàn)槿涡远豢系皖^</a> </li> 
<li><a href="#">不再因?yàn)楣虉?zhí)而輕言分手</a> </li> 
<li><a href="#">堅(jiān)信一次</a> </li> 
<li><a href="#">一顆心需要堅(jiān)定地去溫暖另一顆心</a> </li> 
<li><a href="#">一直走</a> </li> 
<li><a href="#">就可以到白頭</a> </li> 
<li><a href="#">就那樣相守</a> </li> 
<li><a href="#">在來往的流年里</a> </li> 
<li><a href="#">歲月安好</a> </li> 
<li><a href="#">惟愿這一生</a> </li> 
<li><a href="#">執(zhí)子之手</a> </li> 
<li><a href="#">與子偕老</a> </li> 
</div> 
</body> 
</html> 

相關(guān)文章

JQuery防止退格鍵網(wǎng)頁后退的實(shí)現(xiàn)代碼
有時(shí)我們需要防止退格鍵的網(wǎng)頁后退，一般情況下最好不要這么用，因?yàn)閷?duì)UX體驗(yàn)不好
2012-03-03
jQuery ajaxSubmit 實(shí)現(xiàn)ajax提交表單局部刷新
這篇文章主要介紹了jQuery ajaxSubmit 實(shí)現(xiàn)ajax提交表單局部刷新的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
使用jquery為table動(dòng)態(tài)添加行的實(shí)現(xiàn)代碼
最近，有需要做一個(gè)動(dòng)態(tài)的給table，添加行，用了點(diǎn)時(shí)間，算是做成了。已測(cè)試過，但如果發(fā)現(xiàn)有什么bug，可以留言，歡迎拍磚。大家一起進(jìn)步。
2011-03-03
jQuery Validate 數(shù)組全部驗(yàn)證問題
這篇文章主要介紹了jquery validate 數(shù)組全部驗(yàn)證問題及解決辦法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-01-01
jQuery中map函數(shù)的兩種方式
本文給大家分享jquery中map函數(shù)的兩種方式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-04-04
jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效
jQuery插件slick是一款響應(yīng)式、適用于移動(dòng)設(shè)備觸摸屏、可滑動(dòng)顯示的jQuery幻燈片插件。該幻燈片插件可以設(shè)置多種顯示效果，可以自動(dòng)播放，是一款移動(dòng)優(yōu)先的jQuery幻燈片插件。
2015-04-04
jquery 取子節(jié)點(diǎn)及當(dāng)前節(jié)點(diǎn)屬性值的方法
這篇文章主要介紹了jquery 取子節(jié)點(diǎn)及當(dāng)前節(jié)點(diǎn)屬性值的方法,比較適合新手，也比較實(shí)用，需要的朋友可以參考下
2014-08-08
jQuery完成表單驗(yàn)證的實(shí)例代碼(純代碼)
這篇文章主要介紹了jquery完成表單驗(yàn)證的實(shí)例代碼，代碼簡(jiǎn)單易懂,需要的朋友可以參考下
2017-09-09
jquery實(shí)現(xiàn)不同大小瀏覽器使用不同的css樣式表的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)不同大小瀏覽器使用不同的css樣式表的方法,需要的朋友可以參考下
2014-04-04
Jquery網(wǎng)頁內(nèi)滑動(dòng)緩沖導(dǎo)航的實(shí)現(xiàn)代碼
這篇文章主要介紹了Jquery網(wǎng)頁內(nèi)滑動(dòng)緩沖導(dǎo)航的實(shí)現(xiàn)代碼,實(shí)現(xiàn)滑動(dòng)緩沖的方式實(shí)現(xiàn)頁內(nèi)導(dǎo)航，用戶體驗(yàn)大大提升需要的朋友可以參考下
2015-04-04