马赛克切换(切片) 1

拉幕效果

HTML

<input type="button" value="下一张" id="btn_next" />
<div id="box">
</div>

CSS

*{
		margin:0;
		padding:0;
	}
	#box{
		margin:0px auto;
		width:400px;
		height:300px;
	}
	#box span{
		float:left;
	}

JavaScript

var imgs = [
	"http://wenwen.soso.com/p/20110219/20110219110946-1382018702.jpg",
	"http://img6.91huo.cn/game/2012/09/19/news_pic_1348106963692.png"];
	
	//var imgs = ["img/0.jpg", "img/1.jpg", "img/2.jpg"];

	window.onload = function(){

		// 切成5行8列，从上往下顺序切换。注意一定要整除 ！！！！！！！
		//var rows = 5;
		//var cols = 8;
        
		// 如果切成 1 行 100 列，就成了拉幕效果 ！！！！！！！！
        var rows = 1;
        var cols = 100;

		var box = document.getElementById("box");
		var width = box.offsetWidth / cols;
		var height = box.offsetHeight / rows;

		var timer = null;
		var now = 0; 

		for (var r=0; r<rows ;r++ ) {
			for (var c=0; c<cols ; c++ ) {
				var oSpan = document.createElement("span");
				
				oSpan.style.backgroundImage = "url(" + imgs[0] + ")";
				oSpan.style.width = width + "px";
				oSpan.style.height = height + "px";

				box.appendChild(oSpan);
				
				var left = c * width;
				var top = r * height;
				oSpan.style.left = left + "px";
				oSpan.style.top = top + "px";

				oSpan.style.backgroundPosition = "-"+ left + "px -" + top + "px";
			}
		}

		// 是否可以切换
		var ready = true;
		var btn = document.getElementById("btn_next");
		btn.onclick = function(){
			if(!ready){
				return ;
			}
			ready = false;
			
			box.style.background = "url(" + imgs[now] + ")";
			now++;

			if(now == imgs.length){
				now = 0;
			}
			
			var aSpan = box.children;
			var i = 0;

			clearInterval(timer);
			timer = setInterval(function(){
				aSpan[i].style.opacity = 0;
				aSpan[i].style.filter = "alpha(opacity:0)";

				(function(index){
					startMove(aSpan[i], {opacity:100},{time:500, end:function(){
						if(index == aSpan.length - 1){
							ready = true;
						}
					}});
				})(i);

				aSpan[i].style.backgroundImage = "url("+ imgs[now] +")";
				i++;
				
				if(i == aSpan.length){
					clearInterval(timer);
				}
			}, 20);
		};
	};
		


// 运动框架 简单解释：http://www.html-js.com/article/DOM-framework-JS-native-motion-effect

/// <summary>
/// 运动框架，支持匀速、缓冲，加速等运动
/// </summary>
///...