快捷導(dǎo)航

jquery多行滾動/向左或向上滾動/響應(yīng)鼠標(biāo)實現(xiàn)思路及代碼

更新時間：2013年01月23日 16:07:20 作者：

多行滾動jQuery循環(huán)新聞列表代碼包括以下功能:鼠標(biāo)滑上焦點圖時停止自動播放/滑出時開始自動播放以及判斷執(zhí)行橫向或縱向滾動,感興趣的朋友可以了解下哦

html 文件
gundong-0.1.html

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>多行滾動jQuery循環(huán)新聞列表代碼</title> 
<style type="text/css"> 
ul,li{margin:0;padding:0} 
img{border:0px;} 
a{text-decoration:none;border:0px;} 
/* 橫向滾動 */ 
#scrollDiv2{border:#ccc 1px solid;} 
#scrollDiv3{border:#ccc 1px solid;} 
</style> 
<script src="../jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="wordscroll-0.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

$.wordScroll({ 
objId:"scrollDiv2" 
}); 
$.wordScroll({ 
objId:"scrollDiv3", 
isHorizontal:true 
}); 
}); 
</script> 
</head> 
<body> 
<div id="scrollDiv2"> 
<ul> 
<li>這是公告標(biāo)題的第一行</li> 
<li>這是公告標(biāo)題的第二行</li> 
<li>這是公告標(biāo)題的第三行</li> 
<li>這是公告標(biāo)題的第四行</li> 
<li>這是公告標(biāo)題的第五行</li> 
<li>這是公告標(biāo)題的第六行</li> 
<li>這是公告標(biāo)題的第七行</li> 
<li>這是公告標(biāo)題的第八行</li> 
<li>這是公告標(biāo)題的第九行</li> 
</ul> 
</div> 
<div id="scrollDiv3"> 
<ul> 
<li>這是公告標(biāo)題的第一行</li> 
<li>這是公告標(biāo)題的第二行</li> 
<li>這是公告標(biāo)題的第三行</li> 
<li>這是公告標(biāo)題的第四行</li> 
<li>這是公告標(biāo)題的第五行</li> 
<li>這是公告標(biāo)題的第六行</li> 
<li>這是公告標(biāo)題的第七行</li> 
<li>這是公告標(biāo)題的第八行</li> 
<li>這是公告標(biāo)題的第九行</li> 
</ul> 
</div> 
</body> 
</html> 

js文件
wordscroll-0.1.js

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

 
<P>/** 
* 多行文字滾動，可以實現(xiàn)向左和向上兩種滾動 
* 
**/ 
$.extend({ 
wordScroll:function(opt,callback){ 
//alert("suc"); 
this.defaults = { 
objId:"", 
width:300, // 每行的寬度 
height:100, // div的高度 
liHeight:25, // 每行高度 
lines:2, // 每次滾動的行數(shù) 
speed:1000, // 動作時間 
interval:2000, // 滾動間隔 
picTimer:0, // 間隔句柄，不需要設(shè)置，只是作為標(biāo)識使用 
isHorizontal:false // 是否橫向滾動 
} 
//參數(shù)初始化 
var opts = $.extend(this.defaults,opt); 
// 縱向橫向通用 
$("#"+opts.objId).css({ 
width:opts.width, 
height:opts.height, 
"min-height":opts.liHeight, 
"line-height":opts.liHeight+"px", 
overflow:"hidden" 
}); 
$("#"+opts.objId+" li").css({ 
height:opts.liHeight 
}); 
if(opts.lines==0) 
opts.lines=1; 
// 橫向滾動 
if(opts.isHorizontal){ 
$("#"+opts.objId).css({ 
width:opts.width*opts.lines + "px" 
}); 
$("#"+opts.objId+" li").css({ 
"display":"block", 
"float":"left", 
"width":opts.width + "px" 
}); 
$("#"+opts.objId+" ul").css({ 
width:$("#"+opts.objId).find("li").size()*opts.width + "px" 
});</P><P> // 橫向使用，不夠一屏則不滾動 
if($("#"+opts.objId).find("li").size()<=opts.lines) 
return; 
var scrollWidth = 0 - opts.lines*opts.width; 
}else{ 
//如果不夠一屏內(nèi)容 則不滾動 
if($("#"+opts.objId).find("li").size()<=parseInt($("#"+opts.objId).height()/opts.liHeight,10)) 
return; 
var upHeight=0-opts.lines*opts.liHeight; 
} 
// 橫向滾動 
function scrollLeft(){ 
$("#"+opts.objId).find("ul:first").animate({ 
marginLeft:scrollWidth 
},opts.speed,function(){ 
for(i=1;i<=opts.lines;i++){ 
$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); 
} 
$("#"+opts.objId).find("ul:first").css({marginLeft:0}); 
}); 
}; 
// 縱向滾動 
function scrollUp(){ 
$("#"+opts.objId).find("ul:first").animate({ 
marginTop:upHeight 
},opts.speed,function(){ 
for(i=1;i<=opts.lines;i++){ 
$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); 
} 
$("#"+opts.objId).find("ul:first").css({marginTop:0}); 
}); 
}; 
//鼠標(biāo)滑上焦點圖時停止自動播放，滑出時開始自動播放 
$("#"+opts.objId).hover(function() { 
clearInterval(opts.picTimer); 
},function() { 
opts.picTimer = setInterval(function() { 
// 判斷執(zhí)行橫向或縱向滾動 
if(opts.isHorizontal) 
scrollLeft(); 
else 
scrollUp(); 
},opts.interval); // 自動播放的間隔，單位：毫秒 
}).trigger("mouseleave"); 
} 
}) 
</P> 