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右下角滑動彈出可關閉重現(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 主要增加了光標懸停效果
以下是源代碼:
復制代碼 代碼如下:
<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右下角滑動彈出可關閉重現(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');
相關文章
jQuery實現(xiàn)的點贊隨機數(shù)字顯示動畫效果(附在線演示與demo源碼下載)
這篇文章主要介紹了jQuery實現(xiàn)的點贊隨機數(shù)字顯示動畫效果,并附帶在線演示與demo源碼供讀者下載.涉及jQuery鼠標事件響應及基于animate動畫效果實現(xiàn)技巧,需要的朋友可以參考下2015-12-12Jquery循環(huán)截取字符串的方法(多出的字符串處理成"...")
下面小編就為大家?guī)硪黄狫query循環(huán)截取字符串的方法(多出的字符串處理成"...")。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11jQuery插件FusionCharts實現(xiàn)的MSBar2D圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的MSBar2D圖效果,結合實例形式分析了jQuery使用FusionCharts插件結合xml數(shù)據(jù)載入實現(xiàn)繪制MSBar2D圖的相關實現(xiàn)技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2017-03-0310款新鮮出爐的 jQuery 插件(Ajax 插件,有幻燈片、圖片畫廊、菜單等)
這篇文章與大家分享的是10款新鮮出爐的基于 jQuery 開發(fā)的 Ajax 插件,有幻燈片、圖片畫廊、菜單等很多有用的插件。這些作者的想法特別新穎,希望你能從中找到自己需要的插件。2011-06-06