JS Web page Special effects code: Cutting Web page image

JS Effect of picture cutting

DEMO1 (random appearance): http://cnwander.com/demo/puzzle_effect/
The machine is well configured to cut the picture a little bit more (variable xnum,ynum)
DEMO1 (Regular movement): http://cnwander.com/demo/puzzle_effect/index2.html
Test: IE6, IE7, FF3.014
Original: http://cnwander.com/blog/?p=13

The effect of whim, the main outstanding idea, the effect is relatively rough, a good idea, you should be able to extend some of the more innovative picture switching effect.
Nothing special, as for ideas, interested students to see the demo bar.

Effect one (random appearance):

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>puzzle effect-by wander</title> <style type=" Text/css "> * {margin:0; padd ING:0} UL {List-style:none} img {border:0} body {position:relative; background:white; text-align:center 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, Yli MIT;; 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 = m, imgw,imgh; if (wrap) Removeelem (wrap); wrap = Adddi V ($ ("body"), {className: "Imgwrap"}); img.src = URL; wrap.innerhtml = " 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) & lt;=1) {xstart = ToX; ystart = ToY; opa = Toopa; window.clearinterval (timer); numtimer--; if (numtimer <= 0) {SetStyle (Wrap, "paddingtop", top+ "px"); wrap.innerhtml = " 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 (t AG) 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> </pead> <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" ></li> <li url="/files/091117/1_202254. JPG "></li> <li URL = "/files/091117/1_202328.jpg" ></li> </ul> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Effect II (regular motion):

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>puzzle effect-by wander</title> <style type=" Text/css "> * {margin:0; padd ING:0} UL {List-style:none} img {border:0} body {position:relative; background:white; text-align:center 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, Yli MIT;; 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 = m, imgw,imgh; if (wrap) Removeelem (wrap); wrap = Adddi V ($ ("body"), {className: "Imgwrap"}); img.src = URL; wrap.innerhtml = " 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 = x End*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 (to x-xstart,2) +math.pow (toy-ystart,2)) <=1) {xstart = ToX; ystart = ToY; opa = Toopa; window.clearinterval (timer); numtime r--; if (numtimer <= 0) {SetStyle (Wrap, "paddingtop", top+ "px"); wrap.innerhtml = " 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)]; Bre Ak 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 (t AG) 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> </pead> <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" ></li> <li url= "/files/091117/1_202254.jpg" ></li> <li url="/files/091117 /1_202328.jpg "></li" > </ul> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]