国产3p自拍,天天爽夜夜爽人人爽,狠狠干福利视频

　JS效果之圖片切割

作者：CNwander　時間： 2009-11-16　文檔類型：原創(chuàng)　來自：藍色理想

JS效果之圖片切割

DEMO1(隨機出現(xiàn)): http://cnwander.com/demo/puzzle_effect/
機器配置好的可以將圖片切得更細一點 (變量xNum，yNum)
DEMO1(規(guī)則運動): http://cnwander.com/demo/puzzle_effect/index2.html
測試：IE6、IE7、FF3.014
原文：http://cnwander.com/blog/?p=13

突發(fā)奇想的效果，主要突出構(gòu)思，效果還比較粗糙，好好創(chuàng)意一下，應(yīng)該可以引申出一些比較有新意的圖片切換效果。
沒什么特別的東西，至于思路，有興趣的同學(xué)自己看DEMO吧。

效果一(隨機出現(xiàn))：

運行代碼框
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Puzzle effect - by Wander</title> <style type="text/css"> * {margin:0; padding:0} ul {list-style:none} img {border:0} body {position:relative; background:white; text-align:center; font:12px/120% Arial,simsun,sans-serif; color:white; } .imgWrap {margin:0 auto} #thumbs {position:absolute; top: 600px; left:300px; width:400px} #thumbs li {float:left; margin:0 5px; cursor:pointer} #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 by Wander @ cnwander.com var xNum = 2, yNum = 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 = $("#thumbs li"); loadImg(thumbs[0].getAttribute("url")); each(thumbs,thumbEvts); } function thumbEvts() { this.onclick = thumbDown; function thumbDown(e) { each(thumbs,function(){ this.className = ""; }); this.className = "current"; loadImg(this.getAttribute("url")); } } function loadImg(url) { var img = new Image(); var left, top = 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(); else img.onload = initImg; function 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); } } function 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(); function slideTo() { var a = 0.2, toScale = 1, toX = left+xPos, toY = top+yPos, toOpa = 1, timer = window.setInterval(move,20); numTimer++; function 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; } } } } function 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; } function removeElem(elem){ var parent = elem.parentNode; if(parent){ parent.removeChild(elem); } } //遍歷對象 function each(obj,fuc) { for(var key in obj) { obj[key].index = key; fuc.call(obj[key]); } } function randowNum(start,end) { return Math.floor(Math.random()*(end - start)) + start; } //設(shè)置樣式 function 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]; } } //elements finder function $(s,wrap) { var eleExpr = /([a-zA-Z0-9]*)([#\.]?)(\w+)[^\s+]*/g, result = [wrap || document]; while(eleExpr.test(s)) { var tag = RegExp.$1, type = RegExp.$2, content = RegExp.$3, elems = []; for(var i=0; i<result.length; i++) { var temp; switch(type) { case "#": temp = [result[i].getElementById(content)]; break; case ".": temp = getElemsByClassName(content,result[i],tag); break; default: temp = result[i].getElementsByTagName(tag+content); } for(var key in temp) { if(temp[key].nodeType == 1) elems.push(temp[key]); } } result = []; for(var key in elems) { if(elems[key].nodeType == 1) result.push(elems[key]); } } return result.length == 1 ? result[0] : result; function getElemsByClassName(classname,elem,tag) { var result = [], tag = tag || "*", allElems = elem.getElementsByTagName(tag) || elem.all; 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] == classname) result.push(allElems[i]); } } return result; } } </script> </head> <body> <div style="position:absolute; right:0"><a s space</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>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

效果二(規(guī)則運動)：

運行代碼框
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Puzzle effect - by Wander</title> <style type="text/css"> * {margin:0; padding:0} ul {list-style:none} img {border:0} body {position:relative; background:white; text-align:center; font:12px/120% Arial,simsun,sans-serif; color:white; } .imgWrap {margin:0 auto} #thumbs {position:absolute; top: 600px; left:300px; width:400px} #thumbs li {float:left; margin:0 5px; cursor:pointer} #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 by Wander @ cnwander.com var xNum = 3, yNum = 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 = $("#thumbs li"); loadImg(thumbs[0].getAttribute("url")); each(thumbs,thumbEvts); } function thumbEvts() { this.onclick = thumbDown; function thumbDown(e) { each(thumbs,function(){ this.className = ""; }); this.className = "current"; loadImg(this.getAttribute("url")); } } function loadImg(url) { var img = new Image(); var left, top = 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(); else img.onload = initImg; function 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); } } } function addPiece(xStart,yStart,xEnd,yEnd) { var obj = addDiv(wrap), w = imgW/xNum, h = imgH/yNum, opa = 0, xPos = xEnd*w, yPos = yEnd*h; slideTo(); function slideTo() { var a = 0.2, toScale = 1, toX = left+xPos, toY = top+yPos, toOpa = 1, timer = window.setInterval(move,20); numTimer++; function 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; } } } } function 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; } function removeElem(elem){ var parent = elem.parentNode; if(parent){ parent.removeChild(elem); } } //遍歷對象 function each(obj,fuc) { for(var key in obj) { obj[key].index = key; fuc.call(obj[key]); } } function randowNum(start,end) { return Math.floor(Math.random()*(end - start)) + start; } //設(shè)置樣式 function 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]; } } //elements finder function $(s,wrap) { var eleExpr = /([a-zA-Z0-9]*)([#\.]?)(\w+)[^\s+]*/g, result = [wrap || document]; while(eleExpr.test(s)) { var tag = RegExp.$1, type = RegExp.$2, content = RegExp.$3, elems = []; for(var i=0; i<result.length; i++) { var temp; switch(type) { case "#": temp = [result[i].getElementById(content)]; break; case ".": temp = getElemsByClassName(content,result[i],tag); break; default: temp = result[i].getElementsByTagName(tag+content); } for(var key in temp) { if(temp[key].nodeType == 1) elems.push(temp[key]); } } result = []; for(var key in elems) { if(elems[key].nodeType == 1) result.push(elems[key]); } } return result.length == 1 ? result[0] : result; function getElemsByClassName(classname,elem,tag) { var result = [], tag = tag || "*", allElems = elem.getElementsByTagName(tag) || elem.all; 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] == classname) result.push(allElems[i]); } } return result; } } </script> </head> <body> <div style="position:absolute; right:0"><a s space</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>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2952337-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2009/7205.asp　

出處：藍色理想
責任編輯：bluehearts

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。

相關(guān)文章

javascript的緩動效果

JavaScript 圖片切割效果

作者文章

JS實現(xiàn)2D桌球小游戲

JS小游戲貪吃蛇+詳細注釋


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計比賽網(wǎng)頁制作 web標準用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大�！熬�•自然”設(shè)計大賽開啟

國際體驗設(shè)計大會7月將在京舉行

中國國防科技信息中心標志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會

阿里行云

云手機年終巨獻，送禮標配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機主題設(shè)計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx