DEMO1 (appears randomly): http://cnwander.com/demo/puzzle_effect/
If the machine is configured, you can cut the picture into finer details (variables xNum, yNum)
DEMO1 (rule movement): http://cnwander.com/demo/puzzle_effect/index2.html
Test: IE6, IE7, FF3.014
Original text: http://cnwander.com/blog/?p=13
The whimsical effect mainly highlights the idea, and the effect is still relatively rough. With some creativity, you should be able to derive some more innovative picture switching effects.
There is nothing special. As for the ideas, interested students can watch the DEMO by themselves.
Effect 1 (appears randomly):
<!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=utf-8" />
<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: 600px; 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 [email protected]
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="/articleimg/2009/11/7205/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);
}
}
//Traverse the object
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;
}
//Set style
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++) {
vartemp;
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 elements) {
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="/articleimg/2009/11/7205/photo01.jpg" class="current"><img src="/articleimg/2009/11/7205/thumb01.jpg" alt=""/></ li>
<li url="/articleimg/2009/11/7205/photo02.jpg"><img src="/articleimg/2009/11/7205/thumb02.jpg" alt=""/></li>
<li url="/articleimg/2009/11/7205/photo03.jpg"><img src="/articleimg/2009/11/7205/thumb03.jpg" alt=""/></li>
</ul>
</body>
</html>
Effect 2 (regular movement):
<!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=utf-8" />
<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: 600px; 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 [email protected]
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 = $("#thumbsli");
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="/articleimg/2009/11/7205/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++) {
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 = "<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);
}
}
//Traverse the object
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;
}
//Set style
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++) {
vartemp;
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 elements) {
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="/articleimg/2009/11/7205/photo01.jpg" class="current"><img src="/articleimg/2009/11/7205/thumb01.jpg" alt=""/></ li>
<li url="/articleimg/2009/11/7205/photo02.jpg"><img src="/articleimg/2009/11/7205/thumb02.jpg" alt=""/></li>
<li url="/articleimg/2009/11/7205/photo03.jpg"><img src="/articleimg/2009/11/7205/thumb03.jpg" alt=""/></li>
</ul>
</body>
</html>
Classic forum exchange :
http://bbs.blueidea.com/thread-2952337-1-1.html