通用滾動widget

/**
 * 滾動HTML集合對象
 * @param {Element} container 容器節點
 * @param {Number} unitLength 滾動寬度，等於容器內子對象的寬度，子對象寬度必須一致
 * @param {Number} speed 每10毫秒移動的像素值
 * @param {String} direction 滾動方向(up, down, left, right)
 * @param {Number} containerRange 容器可視範圍 width - paddingLeft - paddingRight 或者 height - paddingTop - paddingBottom
 */
Scroll = function(container, unitLength, speed, direction, containerRange){	
    var count = (function(){
        var qty = 0;
        for(var i=0,l=container.childNodes.length;i<l;i++)	{
            if(container.childNodes[i].nodeType==1)qty++;
        }	
        return qty;
    })();

	var container_length = (unitLength * count * 2);

	this.getContainer = function(){
		return container;
	}

    this.getCount = function(){return count;};

	/**
	*@param {String} direction 移動方向
	*@param {Number} perMoveCount 每次移動對象個數
	*/
	this.moveOnce = function(direction, perMoveCount, callback){
		if(isNaN(parseInt(perMoveCount)))perMoveCount = 1;
		var hash = {
			left: container.style.marginLeft,
			right: container.style.marginLeft,
			up: container.style.marginTop,
			down: container.style.marginTop
		}

		var v = parseInt(hash[direction]);
		var moved_length = Math.abs(v - init_pos[direction]);
		if(moved_length == unitLength * count)this.reset(direction);
		var remainder = count % perMoveCount;
		if(remainder){
			var full_times = Math.floor(count / perMoveCount) * perMoveCount;
			var thisObj = this;
			this.move(speed, full_times * unitLength, direction, function(){
				thisObj.move(speed, remainder * unitLength, direction, callback);		
			});			
		}else{
			this.move(speed, perMoveCount * unitLength, direction, callback);			
		}
	}

    this.init = function(){
        var childNodes = container.innerHTML;
        container.style.display = "block";
        container.innerHTML = childNodes + childNodes;
        if(direction == 'up' || direction == 'down'){
        	container.style.height = container_length + "px";
        }else if(direction == 'left' || direction == 'right'){
        	container.style.width = container_length + "px";
        }
		this.reset(direction);
    }

	this.scroll = function(){
		var thisObj = this;
		this.move(speed, unitLength * count, direction, function(){
			//console.info("scrolling");
			thisObj.reset(direction);
			thisObj.scroll(direction);
		});		
	}

	var init_pos = {
		left: 0,
		right: -(container_length - containerRange),
		up: 0,
		down: -(container_length - containerRange)
	}
	/**
	 *重置對象到初始位置
	 */
	this.reset = function(direction){
		//console.info("reset");
		if(direction == "left" || direction == "right"){
			container.style.marginLeft = init_pos[direction] + 'px';
		}else if(direction == "up" || direction == "down"){
			container.style.marginTop = init_pos[direction] + 'px';
		}
	}
}


/**
 * 移動對象
 * @private
 * @param {Element} moveObj 移動對象
 * @param {Number} speed 每10毫秒移動像素
 * @param {String} direction 移動方向
 * @param {Function} onMoved 移動後調用
 */
Scroll.prototype.move= function(speed, distance, direction, onMoved){
	var moveObj = this.getContainer();
    var i = Math.abs(distance);
	var scroll_px = speed;
    var handler = function(){
		if(direction == "left"){
			moveObj.style.marginLeft = parseInt(moveObj.style.marginLeft) - scroll_px + 'px';
		}else if(direction == "right"){
			moveObj.style.marginLeft = parseInt(moveObj.style.marginLeft) + scroll_px + 'px';
		}else if(direction == "up"){
			moveObj.style.marginTop = parseInt(moveObj.style.marginTop) - scroll_px + 'px';
		}else if(direction == "down"){
			moveObj.style.marginTop = parseInt(moveObj.style.marginTop) + scroll_px + 'px';
		}        
        i -= scroll_px;
		if(i > 0 && i < scroll_px){
			scroll_px = i;
		}
        if (i > 0) {
            window.setTimeout(handler, 10);
		}else{ // == 0
            if(typeof(onMoved) == "function")onMoved();
        }
    }
    window.setTimeout(handler, 10);
}

/*
----------------------單擊按鈕向右滾動示例--------------------------
<input id="btnScrollRight" name="" type="button" class="btn_goto"/>
<div style="width:636px;overflow:hidden;">
	<div id="scroll_prizes">
		<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='1' width="150" height="150" border="0" alt="" /></a></div>
		<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='2' width="150" height="150" border="0" alt="" /></a></div>
		<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='3' width="150" height="150" border="0" alt="" /></a></div>
		<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='4' width="150" height="150" border="0" alt="" /></a></div>
		<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='5' width="150" height="150" border="0" alt="" /></a></div>
		<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='6' width="150" height="150" border="0" alt="" /></a></div>
	</div>
</div>
<script>
	var mq1 = new Scroll(document.getElementById("scroll_prizes"), 159, 10, "right", 636, function(){});	
	mq1.init();
	//mq1.scroll();	
	var mq1_is_moving = false;
	document.getElementById("btnScrollRight").onclick = function(){
		//this.moveOnce = function(direction, perMoveCount, callback){
		if(mq1_is_moving)return;
		mq1_is_moving = true;
		mq1.moveOnce("right", 4, function(){
			mq1_is_moving = false;
		});
	}
</script>

---------------------循環向上滾動示例-------------------------------
<div class="co_list" style="height:566px;overflow:hidden;padding:20px 30px">
	<div style="height:536px;overflow:hidden;">
		<div id="marquee2">
			<a href=""><img src="../imgaes/index/co_adv11.png" width="150" height="55" border="0" alt=""/></a>
			<a href=""><img src="../imgaes/index/co_adv12.png" width="150" height="55" border="0" alt=""/></a>
			<a href=""><img src="../imgaes/index/co_adv13.png" width="150" height="55" border="0" alt=""/></a>
			<a href=""><img src="../imgaes/index/co_adv14.png" width="150" height="55" border="0" alt=""/></a>
			<a href=""><img src="../imgaes/index/co_adv15.png" width="150" height="55" border="0" alt=""/></a>
		</div>
	</div>
</div>
<script>	
	mq2 = new Scroll(document.getElementById("marquee2"), 69, 2, "up", 536, function(){});	
	mq2.init();
	mq2.scroll();
</script>

-------------------------循環向右滾動示例-------------------------
<div style="width:615px;overflow:hidden;height:110px;">
	<div id="marquee1">
		<div class="list">
			<img src="../imgaes/index/co_adv11.png" width="201" height="101" border="0" alt="" />
		</div>
		<div class="list">
			<img src="../imgaes/index/co_adv12.png" width="201" height="101" border="0" alt="" />
		</div>
		<div class="list">
			<img src="../imgaes/index/co_adv13.png" width="201" height="101" border="0" alt="" />
		</div>
		<div class="list">
			<img src="../imgaes/index/co_adv14.png" width="201" height="101" border="0" alt="" />
		</div>
		<div class="list">
			<img src="../imgaes/index/co_adv15.png" width="201" height="101" border="0" alt="" />
		</div>		
	</div>
</div>
<script>	
	var mq1 = new Scroll(document.getElementById("marquee1"), 211, 2, "right", 615, function(){});	
	mq1.init();
	mq1.scroll();
</script>	
*/