jQuery實現(xiàn)單行文字間歇向上滾動源代碼
更新時間：2013年06月02日 14:56:18 作者：
使用jquery實現(xiàn)的文字向上滾動效果多的不計其數(shù)吧，間歇向上滾動卻不是那么的多，所以本文簡單的實現(xiàn)了一個，感興趣的朋友可以參考下哈
使用jQuery實現(xiàn)單行文字間歇向上滾動
效果網(wǎng)址:http://www.keleyi.com/keleyi/phtml/textscroll.htm
本效果加強版：http://www.keleyi.com/a/bjac/532bedbffca1affa.htm 主要增加了光標懸停效果
以下是源代碼：
<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特效 單行文字向上滾動(有間歇)</h2>
<div id="scrollDiv_keleyi_com" class="scrollDiv">
<ul>
<li><a >菜單滾動至頂部后固定</a></li>
<li><a >jquery使用ColorBox彈出圖片組瀏覽層</a></li>
<li><a >jquery右下角滑動彈出可關(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')將匹配到的是多個li元素的集合。
如果要指定獲取第一個li元素，那么可以使用“:first”，即$('li:first');
效果網(wǎng)址:http://www.keleyi.com/keleyi/phtml/textscroll.htm
本效果加強版：http://www.keleyi.com/a/bjac/532bedbffca1affa.htm 主要增加了光標懸停效果
以下是源代碼：
復(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特效 單行文字向上滾動(有間歇)</h2>
<div id="scrollDiv_keleyi_com" class="scrollDiv">
<ul>
<li><a >菜單滾動至頂部后固定</a></li>
<li><a >jquery使用ColorBox彈出圖片組瀏覽層</a></li>
<li><a >jquery右下角滑動彈出可關(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')將匹配到的是多個li元素的集合。
如果要指定獲取第一個li元素，那么可以使用“:first”，即$('li:first');
相關(guān)文章
jquery+ashx無刷新GridView數(shù)據(jù)顯示插件(實現(xiàn)分頁、排序、過濾功能)
最近做一個AJAX的GridView來顯示數(shù)據(jù)，當(dāng)然按照現(xiàn)在流行的首選是Jquery。2010-04-04
這篇文章主要是對jQuery控制iFrame的實例代碼進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
jQuery tagsinput在h5郵件客戶端中應(yīng)用詳解
為了保證在pc，ios，android端都可以使用，所以使用H5頁面的方式嵌入app的webview中。接下來通過本文給大家介紹jquery tagsinput在h5郵件客戶端中應(yīng)用詳解，感興趣的朋友一起看看吧2016-09-09
這篇文章主要介紹了jQuery根據(jù)name屬性進行查找的用法,結(jié)合實例形式分析了jQuery各種常見name屬性獲取元素的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jquery操作checkbox,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了jQuery中scrollLeft()方法用法,實例分析了scrollLeft()方法的功能、定義及獲取或設(shè)置匹配元素相對滾動條左側(cè)的偏移(offset)量時的使用技巧,需要的朋友可以參考下2015-01-01
本篇文章主要是對jQuery 無限級菜單的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了30個經(jīng)典的jQuery代碼開發(fā)技巧,包含了常見屬性、方法、元素等的使用技巧,非常具有實用價值,需要的朋友可以參考下2014-12-12
jQuery實現(xiàn)經(jīng)典的網(wǎng)頁3D輪播圖封裝功能【附源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)經(jīng)典的網(wǎng)頁3D輪播圖封裝功能,結(jié)合實例形式詳細分析了基于jQuery插件Figure_3D.js實現(xiàn)3D輪播圖功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章介紹了jQuery中獲取Radio元素值的方法，有需要的朋友可以參考一下2013-07-07