li上下滚动

备忘录--------------------

<script type="text/javascript" src="/${res}/js/company/jquery.min.js"></script>

<script type="text/javascript" src="/${res}/js/scrollQ.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#sItem1").scrollQ();

});

</script>

<ul id="sItem1">

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

</ul>

scrollQ.js：

/**

*

* li上下滚动插件

* line 显示li行数

* scrollNum 每次滚动li行数

* scrollTime 滚动速度 单位毫秒

*/

(function($){

var status = false;

$.fn.scrollQ = function(options){

var defaults = {

line:4,

scrollNum:2,

scrollTime:3000

}

var options=jQuery.extend(defaults,options);

var _self = this;

return this.each(function(){

var i=0;

$("li",this).each(function(){

i++;

$(this).css("display","none");

})

// 如果总行数小于显示行数，ul会被清空，所以做了如下判断。 比较懒，就这样。

if(i<=defaults.line){

$("li",this).each(function(){

$(this).css("display","block");

});

return;

}

$("li:lt("+options.line+")",this).each(function(){

$(this).css("display","block");

})

function scroll() {

for(i=0;i<options.scrollNum;i++) {

var start=$("li:first",_self);

start.fadeOut(100);

start.css("display","none");

start.appendTo(_self);

$("li:eq("+(options.line-1)+")",_self).each(function(){

$(this).fadeIn(500);

$(this).css("display","block");

})

}

}

var timer;

timer = setInterval(scroll,options.scrollTime);

_self.bind("mouseover",function(){

clearInterval(timer);

});

_self.bind("mouseout",function(){

timer = setInterval(scroll,options.scrollTime);

});

});

}

})(jQuery);