DEMO1 (erscheint zufällig): http://cnwander.com/demo/puzzle_effect/
Wenn die Maschine konfiguriert ist, können Sie das Bild in feinere Details zerlegen (Variablen xNum, yNum).
DEMO1 (Regelbewegung): http://cnwander.com/demo/puzzle_effect/index2.html
Test: IE6, IE7, FF3.014
Originaltext: http://cnwander.com/blog/?p=13
Der skurrile Effekt unterstreicht hauptsächlich die Idee, und der Effekt ist immer noch relativ grob. Mit etwas Kreativität sollten Sie in der Lage sein, einige innovativere Bildwechseleffekte abzuleiten.
Was die Ideen betrifft, können sich interessierte Studierende die DEMO selbst ansehen.
Effekt 1 (erscheint zufällig):
<!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 ">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Puzzle-Effekt – von Wander</title>
<style type="text/css">
* {margin:0; padding:0}
ul {list-style:none}
img {border:0}
body {position:relative; text-align:center; font:12px/120% Arial,simsun,serif color:white;
.imgWrap {margin:0 auto}
#thumbs {position:absolute; top: 600px; left:300px;
#thumbs li {float:left; margin:0 5px;
#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 von [email protected]
var xNum = 2,
yAnzahl = 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 = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
every(thumbs,thumbEvts);
}
Funktion thumbEvts() {
this.onclick = thumbDown;
Funktion thumbDown(e) {
every(thumbs,function(){
this.className = "";
});
this.className = "current";
loadImg(this.getAttribute("url"));
}
}
Funktion LoadImg(URL) {
var img = neues Bild();
var links,
oben = 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();
sonst img.onload = initImg;
Funktion 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);
}
}
Funktion 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();
Funktion slideTo() {
var a = 0,2,
toScale = 1,
toX = links+xPos,
toY = top+yPos,
toOpa = 1,
timer = window.setInterval(move,20);
numTimer++;
Funktion 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;
}
}
}
}
Funktion 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;
}
Funktion removeElem(elem){
var parent = elem.parentNode;
if(parent){
parent.removeChild(elem);
}
}
//Das Objekt durchlaufen
Funktion every(obj,fuc) {
for(var-Schlüssel in obj) {
obj[key].index = key;
fuc.call(obj[key]);
}
}
Funktion randowNum(start,end) {
return Math.floor(Math.random()*(end - start)) + start;
}
//Stil festlegen
Funktion 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];
}
}
//Elementfinder
Funktion $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
result = [wrap ||. document];
while(eleExpr.test(s)) {
var tag = RegExp.$1,
Typ = RegExp.$2,
Inhalt = RegExp.$3,
elems = [];
for(var i=0; i<result.length; i++) {
vartemp;
Schalter(Typ) {
Fall "#":
temp = [result[i].getElementById(content)];
brechen;
Fall ".":
temp = getElemsByClassName(content,result[i],tag);
brechen;
Standard:
temp = result[i].getElementsByTagName(tag+content);
}
for(var key in temp) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
Ergebnis = [];
for(var-Schlüssel in Elementen) {
if(elems[key].nodeType == 1) result.push(elems[key]);
}
}
return result.length == 1 ? result[0] : result;
Funktion getElemsByClassName(classname,elem,tag) {
var result = [],
tag = tag ||. "*",
allElems = elem.getElementsByTagName(tag) ||.
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] == Klassenname) result.push(allElems[i]);
}
}
Ergebnis zurückgeben;
}
}
</script>
</head>
<Körper>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">Wanders Raum</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>
Effekt 2 (regelmäßige Bewegung):
<!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 ">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Puzzle-Effekt – von Wander</title>
<style type="text/css">
* {margin:0; padding:0}
ul {list-style:none}
img {border:0}
body {position:relative; text-align:center; font:12px/120% Arial,simsun,serif color:white;
.imgWrap {margin:0 auto}
#thumbs {position:absolute; top: 600px; left:300px;
#thumbs li {float:left; margin:0 5px;
#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 von [email protected]
var xNum = 3,
yAnzahl = 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"));
every(thumbs,thumbEvts);
}
Funktion thumbEvts() {
this.onclick = thumbDown;
Funktion thumbDown(e) {
every(thumbs,function(){
this.className = "";
});
this.className = "current";
loadImg(this.getAttribute("url"));
}
}
Funktion LoadImg(URL) {
var img = neues Bild();
var links,
oben = 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();
sonst img.onload = initImg;
Funktion 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);
}
}
}
Funktion addPiece(xStart,yStart,xEnd,yEnd) {
var obj = addDiv(wrap),
w = imgW/xNum,
h = imgH/yNum,
opa = 0,
xPos = xEnd*w,
yPos = yEnd*h;
slideTo();
Funktion slideTo() {
var a = 0,2,
toScale = 1,
toX = links+xPos,
toY = top+yPos,
toOpa = 1,
timer = window.setInterval(move,20);
numTimer++;
Funktion 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;
}
}
}
}
Funktion 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;
}
Funktion removeElem(elem){
var parent = elem.parentNode;
if(parent){
parent.removeChild(elem);
}
}
//Das Objekt durchlaufen
Funktion every(obj,fuc) {
for(var-Schlüssel in obj) {
obj[key].index = key;
fuc.call(obj[key]);
}
}
Funktion randowNum(start,end) {
return Math.floor(Math.random()*(end - start)) + start;
}
//Stil festlegen
Funktion 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];
}
}
//Elementfinder
Funktion $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
result = [wrap ||. document];
while(eleExpr.test(s)) {
var tag = RegExp.$1,
Typ = RegExp.$2,
Inhalt = RegExp.$3,
elems = [];
for(var i=0; i<result.length; i++) {
vartemp;
Schalter(Typ) {
Fall "#":
temp = [result[i].getElementById(content)];
brechen;
Fall ".":
temp = getElemsByClassName(content,result[i],tag);
brechen;
Standard:
temp = result[i].getElementsByTagName(tag+content);
}
for(var key in temp) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
Ergebnis = [];
for(var-Schlüssel in Elementen) {
if(elems[key].nodeType == 1) result.push(elems[key]);
}
}
return result.length == 1 ? result[0] : result;
Funktion getElemsByClassName(classname,elem,tag) {
var result = [],
tag = tag ||. "*",
allElems = elem.getElementsByTagName(tag) ||.
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] == Klassenname) result.push(allElems[i]);
}
}
Ergebnis zurückgeben;
}
}
</script>
</head>
<Körper>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">Wanders Raum</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>
Klassischer Forum-Austausch :
http://bbs.blueidea.com/thread-2952337-1-1.html