DEMO1 (ปรากฏแบบสุ่ม): http://cnwander.com/demo/puzzle_effect/
หากกำหนดค่าเครื่องแล้ว คุณสามารถตัดภาพให้มีรายละเอียดปลีกย่อยได้ (ตัวแปร xNum, yNum)
DEMO1 (การเคลื่อนไหวของกฎ): http://cnwander.com/demo/puzzle_effect/index2.html
การทดสอบ: IE6, IE7, FF3.014
ข้อความต้นฉบับ: http://cnwander.com/blog/?p=13
เอฟเฟกต์แปลก ๆ เน้นย้ำแนวคิดเป็นหลัก และเอฟเฟกต์ยังค่อนข้างหยาบ ด้วยความคิดสร้างสรรค์บางอย่าง คุณน่าจะสามารถสร้างเอฟเฟกต์การสลับรูปภาพที่สร้างสรรค์มากขึ้นได้
ไม่มีอะไรพิเศษ นักศึกษาที่สนใจ สามารถรับชม DEMO ได้ด้วยตนเอง
เอฟเฟกต์ 1 (ปรากฏแบบสุ่ม):
<!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 ">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>เอฟเฟกต์ปริศนา - โดย Wander</title>
<style type="text/css">
* {ระยะขอบ:0; ช่องว่างภายใน:0}
ul {รายการสไตล์: ไม่มี}
img {เส้นขอบ:0}
เนื้อความ {position:relative; background:white; text-align:center;
.imgWrap {ระยะขอบ:0 อัตโนมัติ}
#thumbs {ตำแหน่ง: สัมบูรณ์; ด้านบน: 600px; ซ้าย: 300px;
#thumbs li {ลอย: ซ้าย; เคอร์เซอร์: 0 5px;
#thumbs li img {ลอย: ซ้าย}
#thumbs li.current {ระยะขอบ: -3px 2px 0 2px; การขยาย: 1px; เส้นขอบ: 2px สีดำทึบ}
</สไตล์>
<script type="text/javascript">
//โค้ดโดย [email protected]
var xNum = 2,
yNum = 2,
xจำกัด,
คุณจำกัด;;
นิ้วหัวแม่มือ var ห่อ;
window.onload = ฟังก์ชั่น () {
var thumbsWrap = $("#thumbs");
setStyle(thumbsWrap,"ซ้าย",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("body").clientWidth];
yLimit = [0,screen.height - 200];
นิ้วหัวแม่มือ = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
แต่ละ(นิ้วหัวแม่มือ,นิ้วหัวแม่มือEvts);
-
ฟังก์ชั่น thumbEvts() {
this.onclick = นิ้วหัวแม่มือลง;
ฟังก์ชั่น ThumbDown (e) {
แต่ละ (นิ้วหัวแม่มือ, ฟังก์ชั่น () {
this.className = "";
-
this.className = "ปัจจุบัน";
loadImg(this.getAttribute("url"));
-
-
ฟังก์ชั่น loadImg (url) {
var img = รูปภาพใหม่ ();
เหลืออีก
บน = 100,
imgW,imgH;
ถ้า (ห่อ) RemoveElem (ห่อ);
wrap = addDiv($("body"),{className:"imgWrap"});
img.src = url;
wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
ถ้า(img.width > 0) initImg();
อื่น img.onload = initImg;
ฟังก์ชั่น initImg() {
imgW = img.ความกว้าง;
imgH = img.height;
ซ้าย = ($("ร่างกาย").clientWidth - imgW)/2;
wrap.innerHTML = "";
numTimer = 0;
สำหรับ (var i = 0; i <xNum; i ++) {
สำหรับ (var j=0; j<yNum; j++)
เพิ่มชิ้น(i,j);
-
-
ฟังก์ชั่น add Piece (x, y) {
var obj = addDiv (ตัด)
w = imgW/xNum,
h = imgH/yNum,
โอป้า = 0,
xPos = x*w,
yPos = y*h,
xStart = randowNum(xLimit[0],xLimit[1]-w),
yStart = randowNum(yLimit[0],yLimit[1]-h);
สไลด์ถึง();
ฟังก์ชั่น SlideTo() {
วาร์ ก = 0.2,
ถึงสเกล = 1,
toX = ซ้าย+xPos,
toY = ด้านบน+yPos,
โตโอปา = 1,
จับเวลา = window.setInterval (ย้าย 20);
numTimer++;
ฟังก์ชั่นย้าย () {
xStart += (toX - xStart)*a;
yStart += (toY - yStart)*a;
โอป้า += (ถึงโอปา - โอป้า)*a;
ถ้า (Math.abs (toX-xStart)<=1) {
xStart = toX;
yStart = toY;
โอปา = ถึงโอปา;
window.clearInterval (จับเวลา);
numTimer--;
ถ้า (numTimer <= 0) {
setStyle(ตัด,"paddingTop",ด้านบน+"px");
wrap.innerHTML = "<img src=""+url+""/>";
-
-
obj.style.cssText = "ตำแหน่ง:สัมบูรณ์;ซ้าย:"+xStart+"px;ด้านบน: "+yStart+"px;ความกว้าง:"+w+"px;ความสูง:"+h+"px;พื้นหลัง:url("+url+ ") ไม่ทำซ้ำ -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
-
-
-
-
ฟังก์ชั่น addDiv (โดยที่ attr) {
var obj = document.createElement("div");
ถ้า(แอตทริบิวต์)
สำหรับ (คีย์ var ใน attr) {
ถ้า (คีย์ == "ชื่อคลาส") obj.className = attr[คีย์];
อื่น obj.setAttribute (คีย์ attr [คีย์]);
-
โดยที่.appendChild(obj);
กลับ obj;
-
ฟังก์ชั่น RemoveElem (องค์ประกอบ) {
var parent = elem.parentNode;
ถ้า (ผู้ปกครอง) {
parent.removeChild (องค์ประกอบ);
-
-
//สำรวจวัตถุ
ฟังก์ชั่นแต่ละอัน (obj, fuc) {
สำหรับ (คีย์ var ใน obj) {
obj [คีย์] .index = คีย์;
fuc.call(obj[คีย์]);
-
-
ฟังก์ชั่น randowNum (เริ่มต้นสิ้นสุด) {
กลับ Math.floor(Math.random()*(end - start)) + start;
-
//กำหนดสไตล์
ฟังก์ชั่น setStyle() {
ถ้า (arguments.length == 2 && ประเภทของข้อโต้แย้ง [1] == "วัตถุ") {
สำหรับ (คีย์ var ในข้อโต้แย้ง [1]) {
อาร์กิวเมนต์ [0] .style [คีย์] = อาร์กิวเมนต์ [1] [คีย์];
-
} อื่นถ้า (arguments.length > 2) {
อาร์กิวเมนต์[0].สไตล์[อาร์กิวเมนต์[1]] = อาร์กิวเมนต์[2];
-
-
// ตัวค้นหาองค์ประกอบ
ฟังก์ชั่น $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
ผลลัพธ์ = [ห่อ ||. เอกสาร];
ในขณะที่ (eleExpr.test (s)) {
แท็ก var = RegExp.$1,
ประเภท = RegExp.$2,
เนื้อหา = RegExp.$3,
องค์ประกอบ = [];
สำหรับ (var i=0; i<result.length; i++) {
วาร์เทมป์;
สวิตช์ (ประเภท) {
กรณี "#":
อุณหภูมิ = [ผลลัพธ์ [i] .getElementById (เนื้อหา)];
หยุดพัก;
กรณี ".":
temp = getElemsByClassName (เนื้อหา ผลลัพธ์ [i] แท็ก);
หยุดพัก;
ค่าเริ่มต้น:
temp = ผล [i] .getElementsByTagName (แท็ก + เนื้อหา);
-
สำหรับ (คีย์ var ในอุณหภูมิ) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
-
-
ผลลัพธ์ = [];
สำหรับ (คีย์ var ในองค์ประกอบ) {
if(elems[key].nodeType == 1) result.push(elems[key]);
-
-
return result.length == 1 ? ผล [0] : ผลลัพธ์;
ฟังก์ชั่น getElemsByClassName (ชื่อคลาส, องค์ประกอบ, แท็ก) {
ผลลัพธ์ var = [],
แท็ก = แท็ก ||. "*",
allElems = elem.getElementsByTagName(แท็ก) ||. elem.all;
สำหรับ (var i=0; i<allElems.length; i++){
รายการ var = allElems[i].className.split(" ");
สำหรับ (var j=0; j<list.length; j++){
ถ้า (รายการ [j] == ชื่อคลาส) result.push (allElems [i]);
-
-
ส่งคืนผลลัพธ์;
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">พื้นที่ของพเนจร </a></div>
<ul id="นิ้วหัวแม่มือ">
<li url="/articleimg/2009/11/7205/photo01.jpg" class="current"><img src="/articleimg/2009/11/7205/thumb01.jpg" alt=""/></ ลี้>
<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>
</ร่างกาย>
</html>
เอฟเฟกต์ 2 (การเคลื่อนไหวปกติ):
<!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 ">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>เอฟเฟกต์ปริศนา - โดย Wander</title>
<style type="text/css">
* {ระยะขอบ:0; ช่องว่างภายใน:0}
ul {รายการสไตล์: ไม่มี}
img {เส้นขอบ:0}
เนื้อความ {position:relative; background:white; text-align:center;
.imgWrap {ระยะขอบ:0 อัตโนมัติ}
#thumbs {ตำแหน่ง: สัมบูรณ์; ด้านบน: 600px; ซ้าย: 300px;
#thumbs li {ลอย: ซ้าย; เคอร์เซอร์: 0 5px;
#thumbs li img {ลอย: ซ้าย}
#thumbs li.current {ระยะขอบ: -3px 2px 0 2px; การขยาย: 1px; เส้นขอบ: 2px สีดำทึบ}
</สไตล์>
<script type="text/javascript">
//โค้ดโดย [email protected]
var xNum = 3,
yNum = 3,
xจำกัด,
คุณจำกัด;;
นิ้วหัวแม่มือ var ห่อ;
window.onload = ฟังก์ชั่น () {
var thumbsWrap = $("#thumbs");
setStyle(thumbsWrap,"ซ้าย",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("body").clientWidth];
yLimit = [0,screen.height - 250];
นิ้วหัวแม่มือ = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
แต่ละ(นิ้วหัวแม่มือ,นิ้วหัวแม่มือEvts);
-
ฟังก์ชั่น thumbEvts() {
this.onclick = นิ้วหัวแม่มือลง;
ฟังก์ชั่น ThumbDown (e) {
แต่ละ (นิ้วหัวแม่มือ, ฟังก์ชั่น () {
this.className = "";
-
this.className = "ปัจจุบัน";
loadImg(this.getAttribute("url"));
-
-
ฟังก์ชั่น loadImg (url) {
var img = รูปภาพใหม่ ();
เหลืออีก
บน = 100,
imgW,imgH;
ถ้า (ห่อ) RemoveElem (ห่อ);
wrap = addDiv($("body"),{className:"imgWrap"});
img.src = url;
wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
ถ้า(img.width > 0) initImg();
อื่น img.onload = initImg;
ฟังก์ชั่น initImg() {
imgW = img.ความกว้าง;
imgH = img.height;
ซ้าย = ($("ร่างกาย").clientWidth - imgW)/2;
wrap.innerHTML = "";
numTimer = 0;
สำหรับ (var i=0; i<xNum; i++) {
สำหรับ (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;
add Piece(xStart,yStart,i,j);
-
-
-
ฟังก์ชั่น add Piece (xStart, yStart, xEnd, yEnd) {
var obj = addDiv (ตัด)
w = imgW/xNum,
h = imgH/yNum,
โอป้า = 0,
xPos = xEnd*w,
yPos = yEnd*h;
สไลด์ถึง();
ฟังก์ชั่น SlideTo() {
วาร์ ก = 0.2,
ถึงสเกล = 1,
toX = ซ้าย+xPos,
toY = ด้านบน+yPos,
โตโอปา = 1,
จับเวลา = window.setInterval (ย้าย 20);
numTimer++;
ฟังก์ชั่นย้าย () {
xStart += (toX - xStart)*a;
yStart += (toY - yStart)*a;
โอป้า += (ถึงโอปา - โอป้า)*a;
if(Math.sqrt(Math.pow(toX-xStart,2)+Math.pow(toY-yStart,2))<=1) {
xStart = toX;
yStart = toY;
โอปา = ถึงโอปา;
window.clearInterval (จับเวลา);
numTimer--;
ถ้า (numTimer <= 0) {
setStyle(ตัด,"paddingTop",ด้านบน+"px");
wrap.innerHTML = "<img src=""+url+""/>";
-
-
obj.style.cssText = "ตำแหน่ง:สัมบูรณ์;ซ้าย:"+xStart+"px;ด้านบน: "+yStart+"px;ความกว้าง:"+w+"px;ความสูง:"+h+"px;พื้นหลัง:url("+url+ ") ไม่ทำซ้ำ -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
-
-
-
-
ฟังก์ชั่น addDiv (โดยที่ attr) {
var obj = document.createElement("div");
ถ้า(แอตทริบิวต์)
สำหรับ (คีย์ var ใน attr) {
ถ้า (คีย์ == "ชื่อคลาส") obj.className = attr[คีย์];
อื่น obj.setAttribute (คีย์ attr [คีย์]);
-
โดยที่.appendChild(obj);
กลับ obj;
-
ฟังก์ชั่น RemoveElem (องค์ประกอบ) {
var parent = elem.parentNode;
ถ้า (ผู้ปกครอง) {
parent.removeChild (องค์ประกอบ);
-
-
//สำรวจวัตถุ
ฟังก์ชั่นแต่ละอัน (obj, fuc) {
สำหรับ (คีย์ var ใน obj) {
obj [คีย์] .index = คีย์;
fuc.call(obj[คีย์]);
-
-
ฟังก์ชั่น randowNum (เริ่มต้นสิ้นสุด) {
กลับ Math.floor(Math.random()*(end - start)) + start;
-
//กำหนดสไตล์
ฟังก์ชั่น setStyle() {
ถ้า (arguments.length == 2 && ประเภทของข้อโต้แย้ง [1] == "วัตถุ") {
สำหรับ (คีย์ var ในข้อโต้แย้ง [1]) {
อาร์กิวเมนต์ [0] .style [คีย์] = อาร์กิวเมนต์ [1] [คีย์];
-
} อื่นถ้า (arguments.length > 2) {
อาร์กิวเมนต์[0].สไตล์[อาร์กิวเมนต์[1]] = อาร์กิวเมนต์[2];
-
-
// ตัวค้นหาองค์ประกอบ
ฟังก์ชั่น $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
ผลลัพธ์ = [ห่อ ||. เอกสาร];
ในขณะที่ (eleExpr.test (s)) {
แท็ก var = RegExp.$1,
ประเภท = RegExp.$2,
เนื้อหา = RegExp.$3,
องค์ประกอบ = [];
สำหรับ (var i=0; i<result.length; i++) {
วาร์เทมป์;
สวิตช์ (ประเภท) {
กรณี "#":
อุณหภูมิ = [ผลลัพธ์ [i] .getElementById (เนื้อหา)];
หยุดพัก;
กรณี ".":
temp = getElemsByClassName (เนื้อหา ผลลัพธ์ [i] แท็ก);
หยุดพัก;
ค่าเริ่มต้น:
temp = ผล [i] .getElementsByTagName (แท็ก + เนื้อหา);
-
สำหรับ (คีย์ var ในอุณหภูมิ) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
-
-
ผลลัพธ์ = [];
สำหรับ (คีย์ var ในองค์ประกอบ) {
if(elems[key].nodeType == 1) result.push(elems[key]);
-
-
return result.length == 1 ? ผล [0] : ผลลัพธ์;
ฟังก์ชั่น getElemsByClassName (ชื่อคลาส, องค์ประกอบ, แท็ก) {
ผลลัพธ์ var = [],
แท็ก = แท็ก ||. "*",
allElems = elem.getElementsByTagName(แท็ก) ||. elem.all;
สำหรับ (var i=0; i<allElems.length; i++){
รายการ var = allElems[i].className.split(" ");
สำหรับ (var j=0; j<list.length; j++){
ถ้า (รายการ [j] == ชื่อคลาส) result.push (allElems [i]);
-
-
ส่งคืนผลลัพธ์;
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">พื้นที่ของพเนจร </a></div>
<ul id="นิ้วหัวแม่มือ">
<li url="/articleimg/2009/11/7205/photo01.jpg" class="current"><img src="/articleimg/2009/11/7205/thumb01.jpg" alt=""/></ ลี้>
<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>
</ร่างกาย>
</html>
การแลกเปลี่ยนฟอรั่มแบบคลาสสิก :
http://bbs.blueidea.com/thread-2952337-1-1.html