jquery單行文字向上滾動效果的實現(xiàn)代碼
更新時間：2014年09月05日 09:56:41 投稿：whsnow
這篇文章主要介紹了jquery單行文字向上滾動效果的具體實現(xiàn)，此效果適應(yīng)于很多場景，會的不會的都要學(xué)習(xí)下啊
<body> <div id="title" style="width:100%;height:40px;">看看間斷滾動文字</div> <div id="content" class="infocontent"> <div id="top" class="infolist"> <ul> <li>央視315曝光: 華潤深陷“海砂門”回應(yīng)澄而未清</li> <li>吉野家被曝餐具不消毒 波司登等羊絨衫不含羊絨</li> <li>無錫警方公布“待產(chǎn)女警突發(fā)不幸”事發(fā)經(jīng)過</li> <li>中國人一天：最后的輪渡 視界：在家“搞定”</li> </ul> </div> <div id="bottom" class="infolist"></div> </div> <div id="foot"></div> </body>
.infolist{width:400px;matgin:0;}
.infolist ul{margin:0;padding:0;}
.infolist ul li{list-style:none;height:26px;line-height:26px;}
.infocontent{width:400px;height:26px;overflow:hidden;border:1px solid #666666;}
var interval=1000;//兩次滾動之間的時間間隔
var stepsize=26;//滾動一次的長度，必須是行高的倍數(shù),這樣滾動的時候才不會斷行
var objInterval=null;
$(document).ready( function(){
//用上部的內(nèi)容填充下部
$("#bottom").html($("#top").html());
//給顯示的區(qū)域綁定鼠標(biāo)事件
$("#content").bind("mouseover",function(){StopScroll();});
$("#content").bind("mouseout",function(){StartScroll();});
//啟動定時器
StartScroll();
});
//啟動定時器，開始滾動
function StartScroll(){
objInterval=setInterval("verticalloop()",interval);
}
//清除定時器，停止?jié)L動
function StopScroll(){
window.clearInterval(objInterval);
}
//控制滾動
function verticalloop(){
//判斷是否上部內(nèi)容全部移出顯示區(qū)域
//如果是，從新開始;否則，繼續(xù)向上移動
if($("#content").scrollTop()>=$("#top").outerHeight()){
$("#content").scrollTop($("#content").scrollTop()-$("#top").outerHeight());
}
//使用jquery創(chuàng)建滾動時的動畫效果
$("#content").animate(
{"scrollTop" : $("#content").scrollTop()+stepsize +"px"},600,function(){
//這里用于顯示滾動區(qū)域的scrollTop，實際應(yīng)用中請刪除
// $("#foot").html("scrollTop:"+$("#content").scrollTop());
});
}
相關(guān)文章
網(wǎng)易首頁的新聞代碼...2007-01-01
this是javascript的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this的值會發(fā)生變化。但是總有一個原則，那就是this指的是調(diào)用函數(shù)的那個對象。接下來通過本文給大家介紹js中的this指針和引用，非常不錯，需要的朋友參考下2016-08-08
Map對象在JavaScript中提供了一種靈活且高效的鍵值對存儲方式,它具有許多實用的方法,如set()、get()、has()和delete()等,使得操作和管理鍵值對變得更加簡單,這篇文章主要介紹了JS中map屬性,需要的朋友可以參考下2024-08-08
基于JavaScript實現(xiàn)瀑布流效果(循環(huán)漸近)
本文給大家介紹基于javascript實現(xiàn)循環(huán)漸近瀑布流效果，代碼簡單易懂，非常具有參考價值，需要的朋友參考下吧2016-01-01
這篇文章主要介紹了js 計算月/周的第一天和最后一天代碼,需要的朋友可以參考下2020-02-02
這篇文章介紹了判定是否原生方法的JS代碼，有需要的朋友可以參考一下2013-11-11
js中的時間轉(zhuǎn)換—毫秒轉(zhuǎn)換成日期時間的示例代碼
本篇文章主要是對js中的時間轉(zhuǎn)換—毫秒轉(zhuǎn)換成日期時間的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
???????分享7?個實用?TypeScript?單行代碼
這篇文章主要介紹了???????分享7?個實用?TypeScript?單行代碼，其中包括泛型、斷言等高級用法，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-05-05
pixijs 是一個強(qiáng)大的 Web Canvas 2D 庫，以其強(qiáng)大性能而著稱。這篇文章主要帶大家學(xué)習(xí)一下PixiJS是如何實現(xiàn)常見圖形繪制的，希望對大家有所幫助2023-02-02
事件委托應(yīng)用在很多開發(fā)場景之中,但是很多同學(xué)對委托的原理、特別是對JS原生實現(xiàn)委托不太了解,下面這篇文章主要給大家介紹了關(guān)于js事件流、事件委托與事件階段的相關(guān)資料,需要的朋友可以參考下2022-02-02