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

2024-09-06 12:41:01

字體：大中小

來源：轉載

供稿：網友

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.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=/"/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 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="/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.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=/"/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 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="/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 全部選擇提示：你可先修改部分代碼，再按運行]

上一篇：JS編碼技巧:翻譯的14天JS編寫技巧

下一篇：JS實例代碼:點擊復制地址發給QQ好友