位置：首页>> 网络编程>> JavaScript>> 奇淫技巧之图片切割

奇淫技巧之图片切割

作者：CNwander　　发布时间：2010-09-21 13:24:00　

标签：图片,切割,特效

测试：IE6、IE7、FF3.014

突发奇想的效果，主要突出构思，效果还比较粗糙，好好创意一下，应该可以引申出一些比较有新意的图片切换效果。
没什么特别的东西，至于思路，有兴趣的同学自己看DEMO吧。

效果一(随机出现):
机器配置好的可以将图片切得更细一点 (变量xNum，yNum

<!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.comvar 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=\"/file/UploadPic/20109/21/loading-41.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 finderfunction $(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="/file/UploadPic/20109/21/photo01-38.jpg" class="current"><img src="https://img.aspxhome.com/file/UploadPic/20109/21/thumb01-40.jpg" alt=""/></li><li url="/file/UploadPic/20109/21/photo02-19.jpg"><img src="https://img.aspxhome.com/file/UploadPic/20109/21/thumb02-44.jpg" alt=""/></li> <li url="/file/UploadPic/20109/21/photo03-16.jpg"><img src="https://img.aspxhome.com/file/UploadPic/20109/21/thumb03-51.jpg" alt=""/></li></ul></body></html>

效果二(规则运动)：
<!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.comvar 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=\"/file/UploadPic/20109/21/loading-41.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 finderfunction $(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="/file/UploadPic/20109/21/photo01-38.jpg" class="current"><img src="https://img.aspxhome.com/file/UploadPic/20109/21/thumb01-40.jpg" alt=""/></li><li url="/file/UploadPic/20109/21/photo02-19.jpg"><img src="https://img.aspxhome.com/file/UploadPic/20109/21/thumb02-44.jpg" alt=""/></li> <li url="/file/UploadPic/20109/21/photo03-16.jpg"><img src="https://img.aspxhome.com/file/UploadPic/20109/21/thumb03-51.jpg" alt=""/></li></ul></body></html>

原文：http://cnwander.com/blog/?p=13

投稿

奇淫技巧之图片切割

猜你喜欢