jquery單行文字向上捲動效果範例_jquery

複製程式碼 程式碼如下:

看看間斷捲動文字

• 央視315曝光: 華潤深陷「海砂門」回應澄而未清


• 吉野家被曝餐具不消毒波司登等羊絨衫不含羊絨


• 無錫警方公佈「待產女警突發不幸」事發經過


• 中國人一天：最後的渡輪視界：在家「搞定」

複製代碼 程式碼如下:

.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;//滾動一次的長度，必須是行高的倍數,這樣滾動的時候才不會斷行
var objInterval=null;

$(document ).ready( function(){
//用上部的內容填充下部
$("#bottom").html($("#top").html());

//給顯示的區域綁定滑鼠事件
$("#content").bind("mouseover",function(){StopScroll();});
$("#content"). bind("mouseout",function(){StartScroll();});

//啟動定時器
StartScroll();
});

//啟動定時器，開始滾動
function StartScroll(){
objInterval=setInterval("verticalloop()",interval);
}

//清除定時器，停止滾動
function StopScroll(){
window.clearInterval(objInterval);
}

//控制滾動
function verticalloop(){
///控制滾動
function verticalloop(){
//判斷是否上部內容是否全部移出顯示區域
//如果是，從新開始;否則，繼續往上移動
if($("#content").scrollTop()>=$("#top").outerHeight()){
$("#content").scrollTop($("#content").scrollTop()-$("#top").outerHeight());
}
//使用jquery建立滾動時的動畫效果
$("#content").animate(
{"scrollTop" : $("#content").scrollTop() stepsize "px"},600,function(){
/ /這裡用於顯示滾動區域的scrollTop，實際應用中請刪除
// $("#foot").html("scrollTop:" $("#content").scrollTop());
});

}