DEMO1 (muncul secara acak): http://cnwander.com/demo/puzzle_effect/
Jika mesin dikonfigurasi, Anda dapat memotong gambar menjadi detail yang lebih halus (variabel xNum, yNum)
DEMO1 (pergerakan aturan): http://cnwander.com/demo/puzzle_effect/index2.html
Tes: IE6, IE7, FF3.014
Teks asli: http://cnwander.com/blog/?p=13
Efek aneh terutama menonjolkan idenya, dan efeknya masih relatif kasar. Dengan sedikit kreativitas, Anda seharusnya bisa mendapatkan beberapa efek peralihan gambar yang lebih inovatif.
Tidak ada yang istimewa, kalau idenya, mahasiswa yang berminat bisa menonton sendiri DEMO-nya.
Efek 1 (muncul secara acak):
<!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 ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>Efek teka-teki - oleh Wander</title>
<gaya tipe="teks/css">
* {margin:0; bantalan:0}
ul {gaya daftar:tidak ada}
img {batas:0}
badan {posisi:relatif; latar belakang:putih; perataan teks:tengah; font:12px/120% Arial,simsun,sans-serif;
.imgWrap {margin:0 otomatis}
#jempol {posisi:mutlak; atas: 600px; kiri:300px lebar:400px}
#jempol li {float:kiri; margin:0 5px;
#jempol li img {float:kiri}
#thumbs li.current {margin:-3px 2px 0 2px; padding:1px border:2px hitam pekat}
</gaya>
<skrip tipe="teks/javascript">
//kode oleh [email protected]
var xNum = 2,
yNum = 2,
xBatas,
yBatas;;
var jempol, bungkus;
jendela.onload = fungsi() {
var thumbsWrap = $("#jempol");
setStyle(thumbsWrap,"left",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("body").clientWidth];
yLimit = [0,tinggi layar - 200];
jempol = $("#thumbsli");
loadImg(jempol[0].getAttribute("url"));
masing-masing(jempol,jempolEvts);
}
fungsi jempolEvts() {
this.onclick = jempol ke bawah;
fungsi jempol ke bawah(e) {
masing-masing(ibu jari,fungsi(){
ini.namakelas = "";
});
this.className = "saat ini";
loadImg(ini.getAttribute("url"));
}
}
fungsi loadImg(url) {
var img = Gambar baru();
var kiri,
atas = 100,
imgW,imgH;
if(bungkus) hapusElem(bungkus);
bungkus = addDiv($("body"),{className:"imgWrap"});
img.src = url;
wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
if(img.lebar > 0) initImg();
lain img.onload = initImg;
fungsi initImg() {
imgW = img.lebar;
imgH = img.tinggi;
kiri = ($("body").clientWidth - imgW)/2;
bungkus.innerHTML = "";
angkaTimer = 0;
untuk(var i=0; i<xNum; i++) {
untuk(var j=0; j<yNum; j++)
addPiece(i,j);
}
}
fungsi addPiece(x,y) {
var obj = addDiv(bungkus),
w = imgW/xNum,
h = imgH/yNum,
opa = 0,
xPos = x*w,
yPos = y*h,
xMulai = RandowNum(xLimit[0],xLimit[1]-w),
yMulai = RandowNum(yLimit[0],yLimit[1]-h);
slideKe();
fungsi slideKe() {
var a = 0,2,
skala = 1,
toX = kiri+xPos,
mainanY = atas+yPos,
keOpa = 1,
timer = window.setInterval(bergerak,20);
angkaTimer++;
fungsi pindah() {
xMulai += (toX - xMulai)*a;
yMulai += (keY - yMulai)*a;
opa += (keOpa - opa)*a;
if(Matematika.abs(toX-xMulai)<=1) {
xMulai = keX;
yMulai = mainanY;
opa = ke Opa;
window.clearInterval(pengatur waktu);
nomorTimer--;
if(numTimer <= 0) {
setStyle(bungkus,"paddingTop",atas+"px");
bungkus.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "posisi:absolute;kiri:"+xStart+"px;atas: "+yStart+"px;lebar:"+w+"px;tinggi:"+h+"px;latar belakang:url("+url+ ") jangan ulangi -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
}
}
}
}
fungsi addDiv(dimana,attr) {
var obj = dokumen.createElement("div");
jika(attr)
untuk(kunci var di attr) {
if(key == "className") obj.className = attr[key];
lain obj.setAttribute(kunci,attr[kunci]);
}
dimana.appendChild(obj);
mengembalikan objek;
}
fungsi hapusElem(elemen){
var induk = elem.parentNode;
jika(orang tua){
parent.removeChild(elem);
}
}
//Melintasi objek
fungsi masing-masing(obj,fuc) {
untuk(kunci var di obj) {
obj[kunci].indeks = kunci;
fuc.call(obj[kunci]);
}
}
fungsi RandowNum(awal,akhir) {
return Math.floor(Math.random()*(end - start)) + start;
}
//Atur gaya
fungsi setGaya() {
if(argumen.panjang == 2 && tipe argumen[1] == "objek") {
for(kunci var dalam argumen[1]) {
argumen[0].gaya[kunci] = argumen[1][kunci];
}
} else if (argumen.panjang > 2) {
argumen[0].gaya[argumen[1]] = argumen[2];
}
}
//pencari elemen
fungsi $(s,bungkus) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
hasil = [bungkus ||.dokumen];
while(eleExpr.test(s)) {
var tag = RegExp.$1,
ketik = RegExp.$2,
konten = RegExp.$3,
elemen = [];
for(var i=0; i<hasil.panjang; i++) {
vartemp;
beralih(ketik) {
kasus "#":
temp = [hasil[i].getElementById(konten)];
merusak;
kasus ".":
temp = getElemsByClassName(konten,hasil[i],tag);
merusak;
bawaan:
temp = hasil[i].getElementsByTagName(tag+konten);
}
for(kunci var dalam suhu) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
hasil = [];
for(kunci var dalam elemen) {
if(elems[key].nodeType == 1) hasil.push(elems[key]);
}
}
kembalikan hasil.panjang == 1 ? hasil[0] : hasil;
fungsi getElemsByClassName(nama kelas,elemen,tag) {
var hasil = [],
tanda = tanda ||.
allElems = elem.getElementsByTagName(tag) ||.
for(var i=0; i<allElems.length; i++){
var daftar = allElems[i].className.split(" ");
for(var j=0; j<daftar.panjang; j++){
if(daftar[j] == nama kelas) hasil.push(semuaElems[i]);
}
}
hasil pengembalian;
}
}
</skrip>
</kepala>
<tubuh>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">Ruang jelajah </a></div>
<ul id="jempol">
<li url="/articleimg/2009/11/7205/photo01.jpg" class="saat ini"><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>
</tubuh>
</html>
Efek 2 (gerakan teratur):
<!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 ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>Efek teka-teki - oleh Wander</title>
<gaya tipe="teks/css">
* {margin:0; bantalan:0}
ul {gaya daftar:tidak ada}
img {batas:0}
badan {posisi:relatif; latar belakang:putih; perataan teks:tengah; font:12px/120% Arial,simsun,sans-serif;
.imgWrap {margin:0 otomatis}
#jempol {posisi:mutlak; atas: 600 piksel; kiri:300 piksel lebar:400 piksel;
#jempol li {float:kiri; margin:0 5px;
#jempol li img {float:kiri}
#thumbs li.current {margin:-3px 2px 0 2px; padding:1px border:2px hitam pekat}
</gaya>
<skrip tipe="teks/javascript">
//kode oleh [email protected]
var xNum = 3,
yNum = 3,
xBatas,
yBatas;;
var jempol, bungkus;
jendela.onload = fungsi() {
var thumbsWrap = $("#jempol");
setStyle(thumbsWrap,"left",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("body").clientWidth];
yLimit = [0,tinggi layar - 250];
jempol = $("#thumbsli");
loadImg(jempol[0].getAttribute("url"));
masing-masing(jempol,jempolEvts);
}
fungsi jempolEvts() {
this.onclick = jempol ke bawah;
fungsi jempol ke bawah(e) {
masing-masing(ibu jari,fungsi(){
ini.namakelas = "";
});
this.className = "saat ini";
loadImg(ini.getAttribute("url"));
}
}
fungsi loadImg(url) {
var img = Gambar baru();
var kiri,
atas = 100,
imgW,imgH;
if(bungkus) hapusElem(bungkus);
bungkus = addDiv($("body"),{className:"imgWrap"});
img.src = url;
wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
if(img.lebar > 0) initImg();
lain img.onload = initImg;
fungsi initImg() {
imgW = img.lebar;
imgH = img.tinggi;
kiri = ($("body").clientWidth - imgW)/2;
bungkus.innerHTML = "";
angkaTimer = 0;
untuk(var i=0; i<xNum; i++) {
untuk(var j=0; j<yNum; j++) {
var xMulai = (xLimit[1])*i/(xNum-1) - imgW*0,5/xNum,
yMulai = (yLimit[1])*j/(yNum-1) - imgH/yNum;
addPiece(xMulai,yMulai,i,j);
}
}
}
fungsi addPiece(xMulai,yMulai,xEnd,yEnd) {
var obj = addDiv(bungkus),
w = imgW/xNum,
h = imgH/yNum,
opa = 0,
xPos = xAkhir*w,
yPos = kamuAkhir*h;
slideKe();
fungsi slideKe() {
var a = 0,2,
skala = 1,
toX = kiri+xPos,
mainanY = atas+yPos,
keOpa = 1,
timer = window.setInterval(bergerak,20);
angkaTimer++;
fungsi pindah() {
xMulai += (toX - xMulai)*a;
yMulai += (keY - yMulai)*a;
opa += (keOpa - opa)*a;
if(Math.sqrt(Math.pow(toX-xStart,2)+Math.pow(toY-yStart,2))<=1) {
xMulai = keX;
yMulai = mainanY;
opa = ke Opa;
window.clearInterval(pengatur waktu);
nomorTimer--;
if(numTimer <= 0) {
setStyle(bungkus,"paddingTop",atas+"px");
bungkus.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "posisi:absolute;kiri:"+xStart+"px;atas: "+yStart+"px;lebar:"+w+"px;tinggi:"+h+"px;latar belakang:url("+url+ ") jangan ulangi -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
}
}
}
}
fungsi addDiv(dimana,attr) {
var obj = dokumen.createElement("div");
jika(attr)
untuk(kunci var di attr) {
if(key == "className") obj.className = attr[key];
lain obj.setAttribute(kunci,attr[kunci]);
}
dimana.appendChild(obj);
mengembalikan objek;
}
fungsi hapusElem(elemen){
var induk = elem.parentNode;
jika(orang tua){
parent.removeChild(elem);
}
}
//Melintasi objek
fungsi masing-masing(obj,fuc) {
untuk(kunci var di obj) {
obj[kunci].indeks = kunci;
fuc.call(obj[kunci]);
}
}
fungsi RandowNum(awal,akhir) {
return Math.floor(Math.random()*(end - start)) + start;
}
//Atur gaya
fungsi setGaya() {
if(argumen.panjang == 2 && tipe argumen[1] == "objek") {
for(kunci var dalam argumen[1]) {
argumen[0].gaya[kunci] = argumen[1][kunci];
}
} else if (argumen.panjang > 2) {
argumen[0].gaya[argumen[1]] = argumen[2];
}
}
//pencari elemen
fungsi $(s,bungkus) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
hasil = [bungkus ||.dokumen];
while(eleExpr.test(s)) {
var tag = RegExp.$1,
ketik = RegExp.$2,
konten = RegExp.$3,
elemen = [];
for(var i=0; i<hasil.panjang; i++) {
vartemp;
beralih(ketik) {
kasus "#":
temp = [hasil[i].getElementById(konten)];
merusak;
kasus ".":
temp = getElemsByClassName(konten,hasil[i],tag);
merusak;
bawaan:
temp = hasil[i].getElementsByTagName(tag+konten);
}
for(kunci var dalam suhu) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
hasil = [];
for(kunci var dalam elemen) {
if(elems[key].nodeType == 1) hasil.push(elems[key]);
}
}
kembalikan hasil.panjang == 1 ? hasil[0] : hasil;
fungsi getElemsByClassName(nama kelas,elemen,tag) {
var hasil = [],
tanda = tanda ||.
allElems = elem.getElementsByTagName(tag) ||.
for(var i=0; i<allElems.length; i++){
var daftar = allElems[i].className.split(" ");
for(var j=0; j<daftar.panjang; j++){
if(daftar[j] == nama kelas) hasil.push(semuaElems[i]);
}
}
hasil pengembalian;
}
}
</skrip>
</kepala>
<tubuh>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">Ruang jelajah </a></div>
<ul id="jempol">
<li url="/articleimg/2009/11/7205/photo01.jpg" class="saat ini"><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>
</tubuh>
</html>
Pertukaran forum klasik :
http://bbs.blueidea.com/thread-2952337-1-1.html