<pre name="code" class="html">竖直滚动 jquery 文字 图片
.box4{height:200px;overflow:hidden;} <pre name="code" class="html"> .box4 ul{height:auto;}
<div class="box4"> <ul> <li>
</li>
<ul>
</div>
$('.box4').myScroll({
speed:500,
scroll_speed:500,
see:8
});
(function($){
$.fn.myScroll = function(options){
var defaults = {
speed:40,
see:4,
rowHeight:35,
scroll_speed:200
};
var opts = $.extend({}, defaults, options),Increase=0;
var _self = $(this),
speeds = opts['speed'],
$son = $(this).find('li'),
Reduce=scroll_li = $son.length - opts['see'],
son_ht = $son.innerHeight(),
scroll_spd = opts.scroll_speed;
function marquee(obj,step){
obj.animate({
scrollTop: step+'px'
},scroll_spd,function(){
intervalFun();
});
}
function intervalFun(){
var interval = setInterval(function(){
var _step =0;
if(scroll_li > Increase){
++Increase;
_step = son_ht*Increase;
marquee(_self,_step);
clearInterval(interval);
}else if(Reduce != 0){
--Reduce;
_step = son_ht*Reduce;
marquee(_self,_step);
if(Reduce < 1){
Reduce = scroll_li;
Increase=0;
}
clearInterval(interval);
}
},speeds);
}
intervalFun();
}
})(jQuery);