滾屏顯示內容

js

$div.myScroll({
    speed:60, //數值越大，速度越慢
});

html結構

<div>
    <ul>
        <li><p></p></li>
        <li><p></p></li>
        <li><p></p></li>
    </ul>
</div>

scroll.js

// JavaScript Document
(function($){
	$.fn.myScroll = function(options){
	//默認配置
	var defaults = {
		speed:40,  //滾動速度,值越大速度越慢
	};
	
	var opts = $.extend({}, defaults, options),intId = [];
	
	function marquee(obj, step){
	
		obj.find("ul").animate({
			marginTop: '-=1'
		},0,function(){
				var s = Math.abs(parseInt($(this).css("margin-top")));
				//20是p元素的浮動，s跟總高+浮動進行對比
				if(s >= ($(this).find("li").slice(0, 1).height() + 20)){
					$(this).find("li").slice(0, 1).appendTo($(this));
					$(this).css("margin-top", 0);
				}
			});
		}
		
		this.each(function(i){
			var speed = opts["speed"],_this = $(this);
			intId[i] = setInterval(function(){
				if(_this.find("ul").height()<=_this.height()){
					clearInterval(intId[i]);
				}else{
					marquee(_this);
				}
			}, speed);

			_this.hover(function(){
				clearInterval(intId[i]);
			},function(){
				intId[i] = setInterval(function(){
					if(_this.find("ul").height()<=_this.height()){
						clearInterval(intId[i]);
					}else{
						marquee(_this);
					}
				}, speed);
			});
		
		});

	}

})(jQuery);