DEMO1 (aparece aleatoriamente): http://cnwander.com/demo/puzzle_effect/
Se a máquina estiver configurada, você pode cortar a imagem em detalhes mais sutis (variáveis xNum, yNum)
DEMO1 (movimento de regras): http://cnwander.com/demo/puzzle_effect/index2.html
Teste: IE6, IE7, FF3.014
Texto original: http://cnwander.com/blog/?p=13
O efeito caprichoso destaca principalmente a ideia, e o efeito ainda é relativamente áspero. Com alguma criatividade, você poderá obter alguns efeitos de troca de imagem mais inovadores.
Não há nada de especial. Quanto às ideias, os alunos interessados podem assistir sozinhos à DEMO.
Efeito 1 (aparece aleatoriamente):
<!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 ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Efeito quebra-cabeça - por Wander</title>
<style type="texto/css">
* {margem:0;
ul {estilo de lista: nenhum}
img {fronteira:0}
corpo {posição:relativo fundo:branco;alinhamento de texto:centro;fonte:12px/120% Arial,simsun,sans-serif cor:branco;
.imgWrap {margem:0 automático}
#thumbs {posição:topo absoluto: 600px esquerda:300px largura:400px}
#thumbs li {float:esquerda;margem:0 5px cursor:ponteiro}
#thumbs li img {float:esquerda}
#thumbs li.current {margem:-3px 2px 0 2px; preenchimento:1px borda:2px preto sólido}
</estilo>
<script type="texto/javascript">
//código de [email protected]
var xNum = 2,
yNum = 2,
xLimite,
yLimite;;
var polegares, envoltório;
janela.onload=função(){
var polegaresWrap = $("#thumbs");
setStyle(thumbsWrap,"left",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("corpo").clientWidth];
limitey = [0, altura da tela - 200];
polegares = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
cada(polegares,polegarEvts);
}
função polegarEvts() {
this.onclick=thumbDown;
função polegar para baixo (e) {
cada(polegares,função(){
this.className = "";
});
this.className = "atual";
loadImg(this.getAttribute("url"));
}
}
função carregarImg(url) {
var img = nova imagem();
var para a esquerda,
topo = 100,
imgW,imgH;
if(wrap) removeElem(wrap);
wrap = addDiv($("corpo"),{nomedaclasse:"imgWrap"});
img.src = url;
wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
if(img.largura > 0) initImg();
senão img.onload = initImg;
function initImg() {
imgW = img.largura;
imgH = img.altura;
esquerda = ($("corpo").clientWidth - imgW)/2;
wrap.innerHTML = "";
numTemporizador = 0;
for(var i=0; i<xNum; i++) {
for(var j=0; j<yNum; j++)
addPiece(i,j);
}
}
função adicionarPedaço(x,y) {
var obj = addDiv(envolver),
w = imgW/xNum,
h = imgH/yNum,
opa = 0,
xPos = x*w,
yPos = y*h,
xStart = randomNum(xLimit[0],xLimit[1]-w),
yStart = randomNum(yLimit[0],yLimit[1]-h);
slideTo();
função slideTo() {
var a = 0,2,
escala = 1,
toX = esquerda + xPos,
toY = topo + yPos,
toOpa = 1,
temporizador = window.setInterval(mover,20);
numTimer++;
função mover() {
xIniciar += (toX - xIniciar)*a;
yIniciar += (toY - yIniciar)*a;
opa += (toOpa - opa)*a;
if(Math.abs(toX-xStart)<=1) {
xIniciar = paraX;
yInício = paraY;
opa = toOpa;
window.clearInterval(temporizador);
numTimer--;
if(numTemporizador <= 0) {
setStyle(wrap,"paddingTop",top+"px");
wrap.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "posição:absoluto;esquerda:"+xStart+"px;top: "+yStart+"px;largura:"+w+"px;altura:"+h+"px;background:url("+url+ ") no-repeat -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
}
}
}
}
function addDiv(onde,attr) {
var obj = document.createElement("div");
se(atributo)
for(var chave em attr) {
if(key == "className") obj.className = attr[key];
senão obj.setAttribute(chave,attr[chave]);
}
onde.appendChild(obj);
retornar objeto;
}
função removeElem(elem){
var pai = elem.parentNode;
se(pai){
parent.removeChild(elem);
}
}
//Percorre o objeto
função cada(obj,fuc) {
for(chave var em obj) {
obj[chave].index = chave;
fuc.call(obj[chave]);
}
}
function numum aleatório(início,fim) {
return Math.floor(Math.random()*(end - start)) + start;
}
//Definir estilo
function setEstilo() {
if(arguments.length == 2 && typeof argumentos[1] == "objeto") {
for(var chave em argumentos[1]) {
argumentos[0].estilo[chave] = argumentos[1][chave];
}
} else if (argumentos.length > 2) {
argumentos[0].estilo[argumentos[1]] = argumentos[2];
}
}
//localizador de elementos
função $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
resultado = [quebrar || documento];
while(eleExpr.teste(s)) {
tag var = RegExp.$1,
tipo = RegExp.$2,
conteúdo = RegExp.$3,
elementos = [];
for(var i=0; i<resultado.comprimento; i++) {
vartemp;
mudar(tipo) {
caso "#":
temp = [resultado[i].getElementById(content)];
quebrar;
caso ".":
temp = getElemsByClassName(conteúdo,resultado[i],tag);
quebrar;
padrão:
temp = resultado[i].getElementsByTagName(tag+conteúdo);
}
for(var chave em temp) {
if(temp[chave].nodeType == 1) elems.push(temp[chave]);
}
}
resultado = [];
for(var chave nos elementos) {
if(elems[chave].nodeType == 1) resultado.push(elems[chave]);
}
}
retornar resultado.comprimento == 1? resultado[0]: resultado;
function getElemsByClassName(nomedaclasse,elem,tag) {
var resultado = [],
etiqueta = etiqueta || "*",
allElems = elem.getElementsByTagName(tag) || elem.all;
for(var i=0; i<allElems.length; i++){
var lista = allElems[i].className.split(" ");
for(var j=0; j<list.length; j++){
if(lista[j] == nome da classe) resultado.push(allElems[i]);
}
}
resultado de retorno;
}
}
</script>
</head>
<corpo>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">Espaço de Wander </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>
Efeito 2 (movimento regular):
<!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 ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Efeito quebra-cabeça - por Wander</title>
<style type="texto/css">
* {margem:0;
ul {estilo de lista: nenhum}
img {fronteira:0}
corpo {posição:relativo fundo:branco;alinhamento de texto:centro;fonte:12px/120% Arial,simsun,sans-serif cor:branco;
.imgWrap {margem:0 automático}
#thumbs {posição:topo absoluto: 600px esquerda:300px largura:400px}
#thumbs li {float:esquerda;margem:0 5px cursor:ponteiro}
#thumbs li img {float:esquerda}
#thumbs li.current {margem:-3px 2px 0 2px; preenchimento:1px borda:2px preto sólido}
</estilo>
<script type="texto/javascript">
//código de [email protected]
var xNum = 3,
yNum = 3,
xLimite,
yLimite;;
var polegares, envoltório;
janela.onload=função(){
var polegaresWrap = $("#thumbs");
setStyle(thumbsWrap,"left",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("corpo").clientWidth];
limitey = [0, altura da tela - 250];
polegares = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
cada(polegares,polegarEvts);
}
função polegarEvts() {
this.onclick=thumbDown;
função polegar para baixo (e) {
cada(polegares,função(){
this.className = "";
});
this.className = "atual";
loadImg(this.getAttribute("url"));
}
}
função carregarImg(url) {
var img = nova imagem();
var para a esquerda,
topo = 100,
imgW,imgH;
if(wrap) removeElem(wrap);
wrap = addDiv($("corpo"),{nomedaclasse:"imgWrap"});
img.src = url;
wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
if(img.largura > 0) initImg();
senão img.onload = initImg;
function initImg() {
imgW = img.largura;
imgH = img.altura;
esquerda = ($("corpo").clientWidth - imgW)/2;
wrap.innerHTML = "";
numTemporizador = 0;
for(var i=0; i<xNum; i++) {
for(var j=0; j<yNum; j++) {
var xIniciar = (xLimite[1])*i/(xNum-1) - imgW*0,5/xNum,
yInício = (yLimite[1])*j/(yNum-1) - imgH/yNum;
addPiece(xStart,yStart,i,j);
}
}
}
function addPiece(xInício,yInício,xEnd,yEnd) {
var obj = addDiv(envolver),
w = imgW/xNum,
h = imgH/yNum,
opa = 0,
xPos = xEnd*w,
yPos = yEnd*h;
slideTo();
função slideTo() {
var a = 0,2,
escala = 1,
toX = esquerda + xPos,
toY = topo + yPos,
toOpa = 1,
temporizador = window.setInterval(mover,20);
numTimer++;
função mover() {
xIniciar += (toX - xIniciar)*a;
yIniciar += (toY - yIniciar)*a;
opa += (toOpa - opa)*a;
if(Math.sqrt(Math.pow(toX-xStart,2)+Math.pow(toY-yStart,2))<=1) {
xIniciar = paraX;
yIniciar = paraY;
opa = toOpa;
window.clearInterval(temporizador);
numTimer--;
if(numTemporizador <= 0) {
setStyle(wrap,"paddingTop",top+"px");
wrap.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "posição:absoluto;esquerda:"+xStart+"px;top: "+yStart+"px;largura:"+w+"px;altura:"+h+"px;background:url("+url+ ") no-repeat -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
}
}
}
}
function addDiv(onde,attr) {
var obj = document.createElement("div");
se(atributo)
for(var chave em attr) {
if(key == "className") obj.className = attr[key];
senão obj.setAttribute(chave,attr[chave]);
}
onde.appendChild(obj);
retornar objeto;
}
função removeElem(elem){
var pai = elem.parentNode;
se(pai){
parent.removeChild(elem);
}
}
//Percorre o objeto
função cada(obj,fuc) {
for(chave var em obj) {
obj[chave].index = chave;
fuc.call(obj[chave]);
}
}
function numum aleatório(início,fim) {
return Math.floor(Math.random()*(end - start)) + start;
}
//Definir estilo
function setEstilo() {
if(arguments.length == 2 && typeof argumentos[1] == "objeto") {
for(var chave em argumentos[1]) {
argumentos[0].estilo[chave] = argumentos[1][chave];
}
} else if (argumentos.length > 2) {
argumentos[0].estilo[argumentos[1]] = argumentos[2];
}
}
//localizador de elementos
função $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
resultado = [quebrar || documento];
while(eleExpr.teste(s)) {
tag var = RegExp.$1,
tipo = RegExp.$2,
conteúdo = RegExp.$3,
elementos = [];
for(var i=0; i<resultado.comprimento; i++) {
vartemp;
mudar(tipo) {
caso "#":
temp = [resultado[i].getElementById(content)];
quebrar;
caso ".":
temp = getElemsByClassName(conteúdo,resultado[i],tag);
quebrar;
padrão:
temp = resultado[i].getElementsByTagName(tag+conteúdo);
}
for(var chave em temp) {
if(temp[chave].nodeType == 1) elems.push(temp[chave]);
}
}
resultado = [];
for(var chave nos elementos) {
if(elems[chave].nodeType == 1) resultado.push(elems[chave]);
}
}
retornar resultado.comprimento == 1? resultado[0]: resultado;
function getElemsByClassName(nomedaclasse,elem,tag) {
var resultado = [],
etiqueta = etiqueta || "*",
allElems = elem.getElementsByTagName(tag) || elem.all;
for(var i=0; i<allElems.length; i++){
var lista = allElems[i].className.split(" ");
for(var j=0; j<list.length; j++){
if(lista[j] == nome da classe) resultado.push(allElems[i]);
}
}
resultado de retorno;
}
}
</script>
</head>
<corpo>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">Espaço de Wander </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>
Troca clássica de fórum :
http://bbs.blueidea.com/thread-2952337-1-1.html