DEMO1 (apparaît de manière aléatoire) : http://cnwander.com/demo/puzzle_effect/
Si la machine est configurée, vous pouvez découper l'image en détails plus fins (variables xNum, yNum)
DEMO1 (mouvement des règles) : http://cnwander.com/demo/puzzle_effect/index2.html
Tests : IE6, IE7, FF3.014
Texte original : http://cnwander.com/blog/?p=13
L'effet fantaisiste met principalement en valeur l'idée, et l'effet est encore relativement approximatif. Avec un peu de créativité, vous devriez pouvoir dériver des effets de changement d'image plus innovants.
Il n'y a rien de spécial. Quant aux idées, les étudiants intéressés peuvent regarder la DÉMO par eux-mêmes.
Effet 1 (apparaît aléatoirement) :
<!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 ">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Effet puzzle - par Wander</title>
<style type="text/css">
* {marge :0 ; remplissage :0}
ul {list-style: aucun}
img {frontière:0}
corps {position : relatif ; arrière-plan : blanc ; texte-align : centre ; police : 12px/120 % Arial, simsun, couleur sans empattement ;
.imgWrap {marge : 0 auto}
#thumbs {position : absolu ; haut : 600 px à gauche : 300 px largeur : 400 px ;
#thumbs li {float:gauche; marge:0 5px; curseur:pointeur}
#thumbs li img {float:gauche}
#thumbs li.current {marge : -3px 2px 0 2px ; rembourrage : 1px bordure : 2px noir uni} ;
</style>
<script type="text/javascript">
//code par [email protected]
var xNum = 2,
yNum = 2,
xLimite,
yLimite;;
var pouces, wrap;
window.onload = fonction() {
var thumbsWrap = $("#thumbs");
setStyle(thumbsWrap,"left",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("body").clientWidth];
yLimite = [0,screen.height - 200] ;
pouces = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
chacun (pouces, pouceEvts);
}
fonction pouceEvts() {
this.onclick = pouceDown ;
fonction pouceDown(e) {
chacun(pouces,fonction(){
this.className = "";
});
this.className = "actuel" ;
loadImg(this.getAttribute("url"));
}
}
fonction loadImg(url) {
var img = nouvelle image ();
var à gauche,
haut = 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();
sinon img.onload = initImg;
fonction initImg() {
imgW = img.largeur ;
imgH = img.hauteur ;
left = ($("body").clientWidth - imgW)/2;
wrap.innerHTML = "";
numTimer = 0 ;
pour(var i=0; i<xNum; i++) {
pour(var j=0; j<yNum; j++)
addPièce(i,j);
}
}
fonction addPièce(x,y) {
var obj = addDiv(wrap),
w = imgW/xNum,
h = imgH/yNum,
opa = 0,
xPos = x*w,
yPos = y*h,
xDébut = randomNum(xLimit[0],xLimit[1]-w),
yStart = randowNum(yLimit[0],yLimit[1]-h);
slideTo();
fonction slideTo() {
var a = 0,2,
àÉchelle = 1,
toX = gauche+xPos,
toY = top+yPos,
toOpa = 1,
minuterie = window.setInterval(move,20);
numTimer++;
fonction déplacer() {
xDébut += (vers X - xDébut)*a;
yDébut += (toY - yDébut)*a;
opa += (àOpa - opa)*a;
if(Math.abs(toX-xStart)<=1) {
xDébut = versX ;
yDébut = toY ;
opa = toOpa;
window.clearInterval(minuterie);
numTimer--;
si (numTimer <= 0) {
setStyle(wrap,"paddingTop",top+"px");
wrap.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "position:absolute;left:"+xStart+"px;top: "+yStart+"px;largeur:"+w+"px;hauteur:"+h+"px;background:url("+url+ ") no-repeat -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
}
}
}
}
fonction addDiv (où, attr) {
var obj = document.createElement("div");
si(attr)
pour (clé var dans attr) {
if(key == "className") obj.className = attr[key];
sinon obj.setAttribute(key,attr[key]);
}
où.appendChild(obj);
retourner obj ;
}
fonction supprimerElem(elem){
var parent = elem.parentNode;
si(parent){
parent.removeChild(elem);
}
}
// Traverser l'objet
fonction chacun (obj, fuc) {
pour (clé var dans obj) {
obj[clé].index = clé;
fuc.call(obj[clé]);
}
}
function randomNum (début, fin) {
return Math.floor(Math.random()*(end - start)) + start;
}
//Définir le style
fonction setStyle() {
if(arguments.length == 2 && typeof arguments[1] == "object") {
pour (clé var dans les arguments [1]) {
arguments[0].style[key] = arguments[1][key];
}
} sinon si (arguments.length > 2) {
arguments[0].style[arguments[1]] = arguments[2];
}
}
// chercheur d'éléments
fonction $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
résultat = [envelopper le document ||
while(eleExpr.test(s)) {
balise var = RegExp.$1,
type = RegExp.$2,
contenu = RegExp.$3,
éléments = [];
pour(var i=0; i<result.length; i++) {
vartemp;
commutateur (type) {
cas "#":
temp = [result[i].getElementById(content)];
casser;
cas ".":
temp = getElemsByClassName(content,result[i],tag);
casser;
défaut:
temp = result[i].getElementsByTagName(tag+content);
}
pour (clé var dans temp) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
résultat = [];
pour (clé var dans les éléments) {
if(elems[key].nodeType == 1) result.push(elems[key]);
}
}
return result.length == 1 ? result[0] : résultat;
function getElemsByClassName (nom de classe, elem, tag) {
var résultat = [],
balise = balise || "*",
allElems = elem.getElementsByTagName(tag) || elem.all;
pour(var i=0; i<allElems.length; i++){
var list = allElems[i].className.split(" ");
pour(var j=0; j<list.length; j++){
if(list[j] == nom de classe) result.push(allElems[i]);
}
}
renvoyer le résultat ;
}
}
</script>
</tête>
<corps>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">L'espace d'errance </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>
</corps>
</html>
Effet 2 (mouvement régulier) :
<!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 ">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Effet puzzle - par Wander</title>
<style type="text/css">
* {marge :0 ; remplissage :0}
ul {list-style: aucun}
img {frontière:0}
corps {position : relatif ; arrière-plan : blanc ; texte-align : centre ; police : 12px/120 % Arial, simsun, couleur sans empattement ;
.imgWrap {marge : 0 auto}
#thumbs {position : absolu ; haut : 600 px à gauche : 300 px largeur : 400 px ;
#thumbs li {float:gauche; marge:0 5px; curseur:pointeur}
#thumbs li img {float:gauche}
#thumbs li.current {marge : -3px 2px 0 2px ; rembourrage : 1px bordure : 2px noir uni} ;
</style>
<script type="text/javascript">
//code par [email protected]
var xNum = 3,
yNum = 3,
xLimite,
yLimite;;
var pouces, wrap;
window.onload = fonction() {
var thumbsWrap = $("#thumbs");
setStyle(thumbsWrap,"left",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("body").clientWidth];
yLimite = [0,screen.height - 250] ;
pouces = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
chacun (pouces, pouceEvts);
}
fonction pouceEvts() {
this.onclick = pouceDown ;
fonction pouceDown(e) {
chacun(pouces,fonction(){
this.className = "";
});
this.className = "actuel" ;
loadImg(this.getAttribute("url"));
}
}
fonction loadImg(url) {
var img = nouvelle image ();
var à gauche,
haut = 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();
sinon img.onload = initImg;
fonction initImg() {
imgW = img.largeur ;
imgH = img.hauteur ;
left = ($("body").clientWidth - imgW)/2;
wrap.innerHTML = "";
numTimer = 0 ;
pour(var i=0; i<xNum; i++) {
pour(var j=0; j<yNum; j++) {
var xStart = (xLimit[1])*i/(xNum-1) - imgW*0.5/xNum,
yDébut = (yLimit[1])*j/(yNum-1) - imgH/yNum;
addPièce(xDébut,yDébut,i,j);
}
}
}
fonction addPièce(xStart,yStart,xEnd,yEnd) {
var obj = addDiv(wrap),
w = imgW/xNum,
h = imgH/yNum,
opa = 0,
xPos = xFin*w,
yPos = yFin*h ;
slideTo();
fonction slideTo() {
var a = 0,2,
àÉchelle = 1,
toX = gauche+xPos,
toY = top+yPos,
toOpa = 1,
minuterie = window.setInterval(move,20);
numTimer++;
fonction déplacer() {
xDébut += (vers X - xDébut)*a;
yDébut += (toY - yDébut)*a;
opa += (àOpa - opa)*a;
if(Math.sqrt(Math.pow(toX-xStart,2)+Math.pow(toY-yStart,2))<=1) {
xDébut = versX ;
yDébut = toY ;
opa = toOpa;
window.clearInterval(minuterie);
numTimer--;
si (numTimer <= 0) {
setStyle(wrap,"paddingTop",top+"px");
wrap.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "position:absolute;left:"+xStart+"px;top: "+yStart+"px;largeur:"+w+"px;hauteur:"+h+"px;background:url("+url+ ") no-repeat -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
}
}
}
}
fonction addDiv (où, attr) {
var obj = document.createElement("div");
si(attr)
pour (clé var dans attr) {
if(key == "className") obj.className = attr[key];
sinon obj.setAttribute(key,attr[key]);
}
où.appendChild(obj);
retourner obj ;
}
fonction supprimerElem(elem){
var parent = elem.parentNode;
si(parent){
parent.removeChild(elem);
}
}
// Traverser l'objet
fonction chacun (obj, fuc) {
pour (clé var dans obj) {
obj[clé].index = clé;
fuc.call(obj[clé]);
}
}
function randomNum (début, fin) {
return Math.floor(Math.random()*(end - start)) + start;
}
//Définir le style
fonction setStyle() {
if(arguments.length == 2 && typeof arguments[1] == "object") {
pour (clé var dans les arguments [1]) {
arguments[0].style[key] = arguments[1][key];
}
} sinon si (arguments.length > 2) {
arguments[0].style[arguments[1]] = arguments[2];
}
}
// chercheur d'éléments
fonction $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
résultat = [envelopper le document ||
while(eleExpr.test(s)) {
balise var = RegExp.$1,
type = RegExp.$2,
contenu = RegExp.$3,
éléments = [];
pour(var i=0; i<result.length; i++) {
vartemp;
commutateur (type) {
cas "#":
temp = [result[i].getElementById(content)];
casser;
cas ".":
temp = getElemsByClassName(content,result[i],tag);
casser;
défaut:
temp = result[i].getElementsByTagName(tag+content);
}
pour (clé var dans temp) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
résultat = [];
pour (clé var dans les éléments) {
if(elems[key].nodeType == 1) result.push(elems[key]);
}
}
return result.length == 1 ? result[0] : résultat;
function getElemsByClassName (nom de classe, elem, tag) {
var résultat = [],
balise = balise || "*",
allElems = elem.getElementsByTagName(tag) || elem.all;
pour(var i=0; i<allElems.length; i++){
var list = allElems[i].className.split(" ");
pour(var j=0; j<list.length; j++){
if(list[j] == nom de classe) result.push(allElems[i]);
}
}
renvoyer le résultat ;
}
}
</script>
</tête>
<corps>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">L'espace d'errance </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>
</corps>
</html>
Forum d'échange classique :
http://bbs.blueidea.com/thread-2952337-1-1.html