快捷導(dǎo)航

jQuery實(shí)現(xiàn)單行文字間歇向上滾動(dòng)源代碼

更新時(shí)間：2013年06月02日 14:56:18 作者：

使用jquery實(shí)現(xiàn)的文字向上滾動(dòng)效果多的不計(jì)其數(shù)吧，間歇向上滾動(dòng)卻不是那么的多，所以本文簡(jiǎn)單的實(shí)現(xiàn)了一個(gè)，感興趣的朋友可以參考下哈

使用jQuery實(shí)現(xiàn)單行文字間歇向上滾動(dòng)

效果網(wǎng)址:http://www.keleyi.com/keleyi/phtml/textscroll.htm
本效果加強(qiáng)版：http://www.keleyi.com/a/bjac/532bedbffca1affa.htm 主要增加了光標(biāo)懸停效果

以下是源代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> 
<style type="text/css"> 
.scrollDiv{height:25px;/* 必要元素 */line-height:25px;border:#ccc 1px solid;overflow:hidden;/* 必要元素 */} 
.scrollDiv li{height:25px;padding-left:10px;} 
ul,li{list-style-type:none;margin:0px;}</style> 

<h2>jquery特效 單行文字向上滾動(dòng)(有間歇)</h2> 
<div id="scrollDiv_keleyi_com" class="scrollDiv"> 
<ul> 
<li><a >菜單滾動(dòng)至頂部后固定</a></li> 
<li><a >jquery使用ColorBox彈出圖片組瀏覽層</a></li> 
<li><a >jquery右下角滑動(dòng)彈出可關(guān)閉重現(xiàn)層</a></li> 
<li><a >jquery清空textarea等輸入框</a></li> 
</ul> 
</div> 
<script type="text/javascript"> 
function AutoScroll(obj){ 
$(obj).find("ul:first").animate({ 
marginTop:"-25px" 
},500,function(){ 
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this); 
}); 
} 
$(document).ready(function(){ 
setInterval('AutoScroll("#scrollDiv_keleyi_com")',3000); 
}); 
</script> 

解析：使用$('li')將匹配到的是多個(gè)li元素的集合。
如果要指定獲取第一個(gè)li元素，那么可以使用“:first”，即$('li:first');

您可能感興趣的文章:

相關(guān)文章

jquery+ashx無(wú)刷新GridView數(shù)據(jù)顯示插件(實(shí)現(xiàn)分頁(yè)、排序、過(guò)濾功能)
最近做一個(gè)AJAX的GridView來(lái)顯示數(shù)據(jù)，當(dāng)然按照現(xiàn)在流行的首選是Jquery。
2010-04-04
jQuery控制iFrame(實(shí)例代碼)
這篇文章主要是對(duì)jQuery控制iFrame的實(shí)例代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
jQuery tagsinput在h5郵件客戶端中應(yīng)用詳解
為了保證在pc，ios，android端都可以使用，所以使用H5頁(yè)面的方式嵌入app的webview中。接下來(lái)通過(guò)本文給大家介紹jquery tagsinput在h5郵件客戶端中應(yīng)用詳解，感興趣的朋友一起看看吧
2016-09-09
jQuery根據(jù)name屬性進(jìn)行查找的用法分析
這篇文章主要介紹了jQuery根據(jù)name屬性進(jìn)行查找的用法,結(jié)合實(shí)例形式分析了jQuery各種常見(jiàn)name屬性獲取元素的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-06-06
jquery操作checkbox示例分享
這篇文章主要介紹了jquery操作checkbox,需要的朋友可以參考下
2014-07-07
jQuery中scrollLeft()方法用法實(shí)例
這篇文章主要介紹了jQuery中scrollLeft()方法用法,實(shí)例分析了scrollLeft()方法的功能、定義及獲取或設(shè)置匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移(offset)量時(shí)的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery 無(wú)限級(jí)菜單的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jQuery 無(wú)限級(jí)菜單的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
30個(gè)經(jīng)典的jQuery代碼開(kāi)發(fā)技巧
這篇文章主要介紹了30個(gè)經(jīng)典的jQuery代碼開(kāi)發(fā)技巧,包含了常見(jiàn)屬性、方法、元素等的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁(yè)3D輪播圖封裝功能【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁(yè)3D輪播圖封裝功能,結(jié)合實(shí)例形式詳細(xì)分析了基于jQuery插件Figure_3D.js實(shí)現(xiàn)3D輪播圖功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
jQuery中獲取Radio元素值的方法
這篇文章介紹了jQuery中獲取Radio元素值的方法，有需要的朋友可以參考一下
2013-07-07