JS網頁特效代碼:切割網頁圖片特殊效果

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS網頁特效代碼:切割網頁圖片特殊效果

JS網頁特效代碼:切割網頁圖片特殊效果

編輯：關於JavaScript

網頁制作poluoluo文章簡介：JS效果之圖片切割.

JS效果之圖片切割

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吧。

效果一(隨機出現)：

運行代碼框
<!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; } //設置樣式 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 href="http://cnwander.com/blog/?p=13">Wander's space</a></div> <ul id="thumbs"> <li url="/files/091117/1_202156.jpg" class="current"><img src="/files/091117/1_202454.jpg" alt=""/></li> <li url="/files/091117/1_202254.jpg"><img src="/files/091117/1_202513.jpg" alt=""/></li> <li url="/files/091117/1_202328.jpg"><img src="/files/091117/1_202522.jpg" alt=""/></li> </ul> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

效果二(規則運動)：

運行代碼框
<!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; } //設置樣式 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 href="http://cnwander.com/blog/?p=13">Wander's space</a></div> <ul id="thumbs"> <li url="/files/091117/1_202156.jpg" class="current"><img src="/files/091117/1_202454.jpg" alt=""/></li> <li url="/files/091117/1_202254.jpg"><img src="/files/091117/1_202513.jpg" alt=""/></li> <li url="/files/091117/1_202328.jpg"><img src="/files/091117/1_202522.jpg" alt=""/></li> </ul> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

上一頁:jQuery教程:制作滑動動畫效果的層
下一頁:正則表達式的高級技巧8個常用的概念

關於JavaScript

CSS教程和jQuery教程:5月收集國外新手網頁設計教程: 破洛洛文章簡介：隨著CSS3的流行，現在已經有很多利用CSS3制作的網站，CSS3提供了很多的設計上
Javascript使用uploadify來實現多文件上傳: 使用uploadify來實現文件上傳能夠客戶端判斷文件大小、控制文件上傳的類型、實現多文件上傳、顯示
JS實現讓網頁背景圖片斜向移動的方法教程: 本文實例講述了JS實現讓網頁背景圖片斜向移動的方法。分享給大家供大家參考。具體實現方法如下：代碼如

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章