DEMO1 (aparece aleatoriamente): http://cnwander.com/demo/puzzle_effect/
Si la máquina está configurada, puede cortar la imagen en detalles más finos (variables xNum, yNum)
DEMO1 (movimiento de reglas): http://cnwander.com/demo/puzzle_effect/index2.html
Prueba: IE6, IE7, FF3.014
Texto original: http://cnwander.com/blog/?p=13
El efecto caprichoso resalta principalmente la idea, y el efecto aún es relativamente tosco. Con algo de creatividad, deberías poder obtener algunos efectos de cambio de imagen más innovadores.
No hay nada especial en cuanto a las ideas, los estudiantes interesados pueden ver la DEMO por sí mismos.
Efecto 1 (aparece aleatoriamente):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<title>Efecto rompecabezas - por Wander</title>
<tipo de estilo="texto/css">
* {margen:0; relleno:0}
ul {estilo de lista: ninguno}
imagen {borde:0}
cuerpo {posición:relativa; fondo:blanco; alineación de texto:centro; fuente:12px/120% Arial,simsun,sans-serif;
.imgWrap {margen:0 automático}
#pulgares {posición:absoluta; arriba: 600px; izquierda:300px; ancho:400px}
#pulgares li {flotador:izquierdo; margen:0 5px; cursor:puntero}
#thumbs li img {flotador:izquierda}
#thumbs li.current {margen:-3px 2px 0 2px; relleno:1px borde:2px negro sólido;
</estilo>
<tipo de script="texto/javascript">
//código de [email protected]
var xNúm = 2,
yNúm = 2,
límite x,
yLimitar;;
var pulgares, envoltura;
ventana.onload = función() {
var pulgaresWrap = $("#pulgares");
setStyle(thumbsWrap,"left",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("cuerpo").clientWidth];
yLimit = [0,altura.pantalla - 200];
pulgares = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
cada uno (pulgares, pulgarEvts);
}
función pulgarEvts() {
this.onclick = pulgarAbajo;
función pulgarAbajo(e) {
cada uno (pulgares, función(){
this.className = "";
});
this.className = "actual";
loadImg(this.getAttribute("url"));
}
}
función cargarImg(url) {
var img = nueva Imagen();
var izquierda,
arriba = 100,
imgW, imgH;
if(envolver) removeElem(envolver);
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;
función initImg() {
imgW = img.ancho;
imgH = img.altura;
izquierda = ($("cuerpo").clientWidth - imgW)/2;
wrap.innerHTML = "";
númTemporizador = 0;
for(var i=0; i<xNum; i++) {
para(var j=0; j<yNum; j++)
agregarPieza(i,j);
}
}
función agregarPieza(x,y) {
var obj = addDiv(envoltura),
w = imgW/xNum,
h = imgH/yNúm,
opa = 0,
xPos = x*w,
yPos = y*h,
xInicio = número aleatorio(xLimit[0],xLimit[1]-w),
yStart = número aleatorio(yLimit[0],yLimit[1]-h);
deslizarA();
función deslizarA() {
var a = 0,2,
a escala = 1,
toX = izquierda+xPos,
toY = arriba+yPos,
aOpa = 1,
temporizador = ventana.setInterval(move,20);
númTemporizador++;
función mover() {
xInicio += (toX - xInicio)*a;
yInicio += (toY - yInicio)*a;
opa += (toOpa - opa)*a;
if(Math.abs(toX-xStart)<=1) {
xInicio = aX;
yInicio = toY;
opa = toOpa;
ventana.clearInterval(temporizador);
numTimer--;
if(numTimer <= 0) {
setStyle(wrap,"paddingTop",top+"px");
wrap.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "posición:absoluta;izquierda:"+xInicio+"px;arriba: "+yInicio+"px;ancho:"+w+"px;alto:"+h+"px;fondo:url("+url+ ") sin repetición -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacidad:"+ opa;
}
}
}
}
función addDiv(donde,atributo) {
var obj = document.createElement("div");
si(atributo)
for(var clave en atributo) {
if(clave == "nombre de clase") obj.nombre de clase = attr[clave];
else obj.setAttribute(clave,attr[clave]);
}
donde.appendChild(obj);
objeto de retorno;
}
función eliminarElem(elem){
var padre = elem.parentNode;
si(padre){
padre.removeChild(elem);
}
}
//Atraviesa el objeto
función cada(obj,fuc) {
para (clave var en obj) {
obj[clave].index = clave;
fuc.call(obj[clave]);
}
}
function número aleatorio(inicio,fin) {
return Math.floor(Math.random()*(fin - inicio)) + inicio;
}
//Establecer estilo
función establecerEstilo() {
if(argumentos.longitud == 2 && tipo de argumentos[1] == "objeto") {
for(var clave en argumentos[1]) {
argumentos[0].estilo[clave] = argumentos[1][clave];
}
} más si (argumentos.longitud > 2) {
argumentos[0].estilo[argumentos[1]] = argumentos[2];
}
}
//buscador de elementos
función $(s,envoltura) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
resultado = [ajustar || documento];
while(eleExpr.prueba(s)) {
etiqueta var = RegExp.$1,
tipo = RegExp.$2,
contenido = RegExp.$3,
elementos = [];
for(var i=0; i<resultado.longitud; i++) {
vartemp;
cambiar(tipo) {
caso "#":
temp = [resultado[i].getElementById(contenido)];
romper;
caso ".":
temp = getElemsByClassName(contenido,resultado[i],etiqueta);
romper;
por defecto:
temp = resultado[i].getElementsByTagName(etiqueta+contenido);
}
para (clave var en temperatura) {
if(temp[clave].nodeType == 1) elems.push(temp[clave]);
}
}
resultado = [];
for(var clave en elementos) {
if(elems[clave].nodeType == 1) resultado.push(elems[clave]);
}
}
devolver resultado.longitud == 1? resultado[0] : resultado;
función getElemsByClassName(nombre de clase,elem,etiqueta) {
resultado var = [],
etiqueta = etiqueta || "*",
allElems = elem.getElementsByTagName(etiqueta) || elem.all;
for(var i=0; i<allElems.length; i++){
var lista = allElems[i].className.split(" ");
for(var j=0; j<lista.longitud; j++){
if(lista[j] == nombre de clase) resultado.push(allElems[i]);
}
}
resultado de devolución;
}
}
</script>
</cabeza>
<cuerpo>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">Espacio de Wander </a></div>
<ul id="pulgares">
<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>
</cuerpo>
</html>
Efecto 2 (movimiento regular):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<title>Efecto rompecabezas - por Wander</title>
<tipo de estilo="texto/css">
* {margen:0; relleno:0}
ul {estilo de lista: ninguno}
imagen {borde:0}
cuerpo {posición:relativa; fondo:blanco; alineación de texto:centro; fuente:12px/120% Arial,simsun,sans-serif;
.imgWrap {margen:0 automático}
#pulgares {posición:absoluta; arriba: 600px; izquierda:300px; ancho:400px}
#pulgares li {flotador:izquierdo; margen:0 5px; cursor:puntero}
#thumbs li img {flotador:izquierda}
#thumbs li.current {margen:-3px 2px 0 2px; relleno:1px borde:2px negro sólido;
</estilo>
<tipo de script="texto/javascript">
//código de [email protected]
var xNúm = 3,
yNúm = 3,
límite x,
yLimitar;;
var pulgares, envoltura;
ventana.onload = función() {
var pulgaresWrap = $("#pulgares");
setStyle(thumbsWrap,"left",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("cuerpo").clientWidth];
yLimit = [0,altura.pantalla - 250];
pulgares = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
cada uno (pulgares, pulgarEvts);
}
función pulgarEvts() {
this.onclick = pulgarAbajo;
función pulgarAbajo(e) {
cada uno (pulgares, función(){
this.className = "";
});
this.className = "actual";
loadImg(this.getAttribute("url"));
}
}
función cargarImg(url) {
var img = nueva Imagen();
var izquierda,
arriba = 100,
imgW, imgH;
if(envolver) removeElem(envolver);
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;
función initImg() {
imgW = img.ancho;
imgH = img.altura;
izquierda = ($("cuerpo").clientWidth - imgW)/2;
wrap.innerHTML = "";
númTemporizador = 0;
for(var i=0; i<xNum; i++) {
for(var j=0; j<yNum; j++) {
var xInicio = (xLimit[1])*i/(xNum-1) - imgW*0.5/xNum,
yInicio = (yLimit[1])*j/(yNum-1) - imgH/yNum;
addPieza(xInicio,yInicio,i,j);
}
}
}
función agregarPieza(xInicio,yInicio,xEnd,yEnd) {
var obj = addDiv(envoltura),
w = imgW/xNum,
h = imgH/yNúm,
opa = 0,
xPos = xEnd*w,
yPos = yEnd*h;
deslizarA();
función deslizarA() {
var a = 0,2,
a escala = 1,
toX = izquierda+xPos,
toY = arriba+yPos,
aOpa = 1,
temporizador = ventana.setInterval(move,20);
númTemporizador++;
función mover() {
xInicio += (toX - xInicio)*a;
yInicio += (toY - yInicio)*a;
opa += (toOpa - opa)*a;
if(Math.sqrt(Math.pow(toX-xStart,2)+Math.pow(toY-yStart,2))<=1) {
xInicio = aX;
yInicio = toY;
opa = toOpa;
ventana.clearInterval(temporizador);
numTimer--;
if(numTimer <= 0) {
setStyle(wrap,"paddingTop",top+"px");
wrap.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "posición:absoluta;izquierda:"+xInicio+"px;arriba: "+yInicio+"px;ancho:"+w+"px;alto:"+h+"px;fondo:url("+url+ ") sin repetición -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacidad:"+ opa;
}
}
}
}
función addDiv(donde,atributo) {
var obj = document.createElement("div");
si(atributo)
for(var clave en atributo) {
if(clave == "nombre de clase") obj.nombre de clase = attr[clave];
else obj.setAttribute(clave,attr[clave]);
}
donde.appendChild(obj);
objeto de retorno;
}
función eliminarElem(elem){
var padre = elem.parentNode;
si(padre){
padre.removeChild(elem);
}
}
//Atraviesa el objeto
función cada(obj,fuc) {
para (clave var en obj) {
obj[clave].index = clave;
fuc.call(obj[clave]);
}
}
function número aleatorio(inicio,fin) {
return Math.floor(Math.random()*(fin - inicio)) + inicio;
}
//Establecer estilo
función establecerEstilo() {
if(argumentos.longitud == 2 && tipo de argumentos[1] == "objeto") {
for(var clave en argumentos[1]) {
argumentos[0].estilo[clave] = argumentos[1][clave];
}
} más si (argumentos.longitud > 2) {
argumentos[0].estilo[argumentos[1]] = argumentos[2];
}
}
//buscador de elementos
función $(s,envoltura) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
resultado = [ajustar || documento];
while(eleExpr.prueba(s)) {
etiqueta var = RegExp.$1,
tipo = RegExp.$2,
contenido = RegExp.$3,
elementos = [];
for(var i=0; i<resultado.longitud; i++) {
vartemp;
cambiar(tipo) {
caso "#":
temp = [resultado[i].getElementById(contenido)];
romper;
caso ".":
temp = getElemsByClassName(contenido,resultado[i],etiqueta);
romper;
por defecto:
temp = resultado[i].getElementsByTagName(etiqueta+contenido);
}
para (clave var en temperatura) {
if(temp[clave].nodeType == 1) elems.push(temp[clave]);
}
}
resultado = [];
for(var clave en elementos) {
if(elems[clave].nodeType == 1) resultado.push(elems[clave]);
}
}
devolver resultado.longitud == 1? resultado[0] : resultado;
función getElemsByClassName(nombre de clase,elem,etiqueta) {
resultado var = [],
etiqueta = etiqueta || "*",
allElems = elem.getElementsByTagName(etiqueta) || elem.all;
for(var i=0; i<allElems.length; i++){
var lista = allElems[i].className.split(" ");
for(var j=0; j<lista.longitud; j++){
if(lista[j] == nombre de clase) resultado.push(allElems[i]);
}
}
resultado de devolución;
}
}
</script>
</cabeza>
<cuerpo>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">Espacio de Wander </a></div>
<ul id="pulgares">
<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>
</cuerpo>
</html>
Intercambio de foro clásico :
http://bbs.blueidea.com/thread-2952337-1-1.html