IDC资讯中心
javascript图片分解重组效果
1、随机重组：
打开时，一个图片被分解成四个小图片，然后从四个随机的方向上向中间移动，组合成一个完整的图片，此效果非常适合做幻灯片，效果见
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Puzzle effect – by Wander</title>
<style type="text/css">
* {margin:0; padding:0}
ul {list-style:none}
img {border:0}
body {position:relative; background:white; text-align:center; font:12px/120% Arial,simsun,sans-serif; color:white; }
.imgWrap {margin:0 auto}
#thumbs {position:absolute; top:10px; left:300px; width:400px}
#thumbs li {float:left; margin:0 5px; cursor:pointer}
#thumbs li img {float:left}
#thumbs li.current {margin:-3px 2px 0 2px; padding:1px; border:2px solid black}
</style>
<script type="text/javascript">
//code by Wander @ cnwander.com
var xNum = 2,
yNum = 2,
xLimit,
yLimit;;
var thumbs,wrap;
window.onload = function() {
var thumbsWrap = $("#thumbs");
setStyle(thumbsWrap,"left",($("body").clientWidth – thumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("body").clientWidth];
yLimit = [0,screen.height – 200];
thumbs = $("#thumbs li");
loadImg(thumbs[0].getAttribute("url"));
each(thumbs,thumbEvts);
}
function thumbEvts() {
this.onclick = thumbDown;
function thumbDown(e) {
each(thumbs,function(){
this.className = "";
});
this.className = "current";
loadImg(this.getAttribute("url"));
}
}
function loadImg(url) {
var img = new Image();
var left,
top = 100,
imgW,imgH;
if(wrap) removeElem(wrap);
wrap = addDiv($("body"),{className:"imgWrap"});
img.src = url;
wrap.innerHTML = "<img src=\"http://www.aspprogram.cn/test/news2/loading.gif\" style=\"margin-top:250px\"/>";
if(img.width > 0) initImg();
else img.onload = initImg;
function initImg() {
imgW = img.width;
imgH = img.height;
left = ($("body").clientWidth – imgW)/2;
wrap.innerHTML = "";
numTimer = 0;
for(var i=0; i<xNum; i++) {
for(var j=0; j<yNum; j++)
addPiece(i,j);
}
}
function addPiece(x,y) {
var obj = addDiv(wrap),
w = imgW/xNum,
h = imgH/yNum,
opa = 0,
xPos = x*w,
yPos = y*h,
xStart = randowNum(xLimit[0],xLimit[1]-w),
yStart = randowNum(yLimit[0],yLimit[1]-h);
slideTo();
function slideTo() {
var a = 0.2,
toScale = 1,
toX = left+xPos,
toY = top+yPos,
toOpa = 1,
timer = window.setInterval(move,20);
numTimer++;
function move() {
xStart += (toX – xStart)*a;
yStart += (toY – yStart)*a;
opa += (toOpa – opa)*a;
if(Math.abs(toX-xStart)<=1) {
xStart = toX;
yStart = toY;
opa = toOpa;
window.clearInterval(timer);
numTimer–;
if(numTimer <= 0) {
setStyle(wrap,"paddingTop",top+"px");
wrap.innerHTML = "<img src=\""+url+"\"/>";
}
}
obj.style.cssText = "position:absolute;left:"+xStart+"px;top: "+yStart+"px;width:"+w+"px;height:"+h+"px;background:url("+url+") no-repeat -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
}
}
}
}
function addDiv(where,attr) {
var obj = document.createElement("div");
if(attr)
for(var key in attr) {
if(key == "className") obj.className = attr[key];
else obj.setAttribute(key,attr[key]);
}
where.appendChild(obj);
return obj;
}
function removeElem(elem){
var parent = elem.parentNode;
if(parent){
parent.removeChild(elem);
}
}
//遍历对象
function each(obj,fuc) {
for(var key in obj) {
obj[key].index = key;
fuc.call(obj[key]);
}
}
function randowNum(start,end) {
return Math.floor(Math.random()*(end – start)) + start;
}
//设置样式
function setStyle() {
if(arguments.length == 2 && typeof arguments[1] == "object") {
for(var key in arguments[1]) {
arguments[0].style[key] = arguments[1][key];
}
} else if (arguments.length > 2) {
arguments[0].style[arguments[1]] = arguments[2];
}
}
//elements finder
function $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#\.]?)(\w+)[^\s+]*/g,
result = [wrap || document];
while(eleExpr.test(s)) {
var tag = RegExp.$1,
type = RegExp.$2,
content = RegExp.$3,
elems = [];
for(var i=0; i<result.length; i++) {
var temp;
switch(type) {
case "#":
temp = [result[i].getElementById(content)];
break;
case ".":
temp = getElemsByClassName(content,result[i],tag);
break;
default:
temp = result[i].getElementsByTagName(tag+content);
}
for(var key in temp) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
result = [];
for(var key in elems) {
if(elems[key].nodeType == 1) result.push(elems[key]);
}
}
return result.length == 1 ? result[0] : result;
function getElemsByClassName(classname,elem,tag) {
var result = [],
tag = tag || "*",
allElems = elem.getElementsByTagName(tag) || elem.all;
for(var i=0; i<allElems.length; i++){
var list = allElems[i].className.split(" ");
for(var j=0; j<list.length; j++){
if(list[j] == classname) result.push(allElems[i]);
}
}
return result;
}
}
</script>
</head>
<body>
<div style="position:absolute; right:0"><a href="http://cnwander.com/blog/?p=13">Wander’s space</a></div>
<ul id="thumbs">
<li url="http://www.aspprogram.cn/test/news2/photo01.jpg" class="current"><img src="http://www.aspprogram.cn/test/news2/thumb01.jpg" alt=""/></li>
<li url="http://www.aspprogram.cn/test/news2/photo02.jpg"><img src="http://www.aspprogram.cn/test/news2/thumb02.jpg" alt=""/></li>
<li url="http://www.aspprogram.cn/test/news2/photo03.jpg"><img src="http://www.aspprogram.cn/test/news2/thumb03.jpg" alt=""/></li>
</ul>
</body>
</html>
[/code]
2、规律重组
相比上一个，规律重组的效果是四个小图片都是从固定方向上向一起移动，组合成完整的图片，效果：
[code]
* {margin:0; padding:0}
ul {list-style:none}
img {border:0}
body {position:relative; background:white; text-align:center; font:12px/120% Arial,simsun,sans-serif; color:white; }
.imgWrap {margin:0 auto}
#thumbs {position:absolute; top: 30px; left:300px; width:400px}
#thumbs li {float:left; margin:0 5px; cursor:pointer}
#thumbs li img {float:left}
#thumbs li.current {margin:-3px 2px 0 2px; padding:1px; border:2px solid black}
//code by Wander @ cnwander.com
var xNum = 3,
yNum = 3,
xLimit,
yLimit
var thumbs,wrap;
window.onload = function() {
var thumbsWrap = $(“#thumbs”);
setStyle(thumbsWrap,”left”,($(“body”).clientWidth – thumbsWrap.offsetWidth)/2+”px”);
xLimit = [0,$(“body”).clientWidth];
yLimit = [0,screen.height – 250];
thumbs = $(“#thumbs li”);
loadImg(thumbs[0].getAttribute(“url”));
each(thumbs,thumbEvts);
}
function thumbEvts() {
this.onclick = thumbDown;
function thumbDown(e) {
each(thumbs,function(){
this.className = “”;
});
this.className = “current”;
loadImg(this.getAttribute(“url”));
}
}
function loadImg(url) {
var img = new Image();
var left,
top = 100,
imgW,imgH;
if(wrap) removeElem(wrap);
wrap = addDiv($(“body”),{className:”imgWrap”});
img.src = url;
wrap.innerHTML = “
“;
if(img.width > 0) initImg();
else img.onload = initImg;
function initImg() {
imgW = img.width;
imgH = img.height;
left = ($(“body”).clientWidth – imgW)/2;
wrap.innerHTML = “”;
numTimer = 0;
for(var i=0; i<xNum; i++) {
for(var j=0; j<yNum; j++) {
var xStart = (xLimit[1])*i/(xNum-1) – imgW*0.5/xNum,
yStart = (yLimit[1])*j/(yNum-1) – imgH/yNum;
addPiece(xStart,yStart,i,j);
}
}
}
function addPiece(xStart,yStart,xEnd,yEnd) {
var obj = addDiv(wrap),
w = imgW/xNum,
h = imgH/yNum,
opa = 0,
xPos = xEnd*w,
yPos = yEnd*h;
slideTo();
function slideTo() {
var a = 0.2,
toScale = 1,
toX = left+xPos,
toY = top+yPos,
toOpa = 1,
timer = window.setInterval(move,20);
numTimer++;
function move() {
xStart += (toX – xStart)*a;
yStart += (toY – yStart)*a;
opa += (toOpa – opa)*a;
if(Math.sqrt(Math.pow(toX-xStart,2)+Math.pow(toY-yStart,2))<=1) {
xStart = toX;
yStart = toY;
opa = toOpa;
window.clearInterval(timer);
numTimer–;
if(numTimer <= 0) {
setStyle(wrap,"paddingTop",top+"px");
wrap.innerHTML = "“;
}
}
obj.style.cssText = “position:absolute;left:”+xStart+”px;top: “+yStart+”px;width:”+w+”px;height:”+h+”px;background:url(“+url+”) no-repeat -“+xPos+”px -“+yPos+”px;filter:alpha(opacity=”+ opa*100 +”); -moz-opacity:”+ opa +”; opacity:”+ opa;
}
}
}
}
function addDiv(where,attr) {
var obj = document.createElement(“div”);
if(attr)
for(var key in attr) {
if(key == “className”) obj.className = attr[key];
else obj.setAttribute(key,attr[key]);
}
where.appendChild(obj);
return obj;
}
function removeElem(elem){
var parent = elem.parentNode;
if(parent){
parent.removeChild(elem);
}
}
//遍历对象
function each(obj,fuc) {
for(var key in obj) {
obj[key].index = key;
fuc.call(obj[key]);
}
}
function randowNum(start,end) {
return Math.floor(Math.random()*(end – start)) + start;
}
//设置样式
function setStyle() {
if(arguments.length == 2 && typeof arguments[1] == “object”) {
for(var key in arguments[1]) {
arguments[0].style[key] = arguments[1][key];
}
} else if (arguments.length > 2) {
arguments[0].style[arguments[1]] = arguments[2];
}
}
//elements finder
function $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#\.]?)(\w+)[^\s+]*/g,
result = [wrap || document];
while(eleExpr.test(s)) {
var tag = RegExp.$1,
type = RegExp.$2,
content = RegExp.$3,
elems = [];
for(var i=0; i<result.length; i++) {
var temp;
switch(type) {
case "#":
temp = [result[i].getElementById(content)];
break;
case ".":
temp = getElemsByClassName(content,result[i],tag);
break;
default:
temp = result[i].getElementsByTagName(tag+content);
}
for(var key in temp) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
result = [];
for(var key in elems) {
if(elems[key].nodeType == 1) result.push(elems[key]);
}
}
return result.length == 1 ? result[0] : result;
function getElemsByClassName(classname,elem,tag) {
var result = [],
tag = tag || "*",
allElems = elem.getElementsByTagName(tag) || elem.all;
for(var i=0; i
Wander’s space
