DHTML 打造 Picture Spelling

不必切图，只有树立基础的 图片及其属性即可！用鼠标右键遏制图片翻转！<style>*{ font-size: 12px; }select { width: 100px; background-color: #eeeeee;}div { padding: 2px;}</style><script language="javascript1.2">/* this following code are designed and writen by windy_sk <seasonx@163.net> you can use it freely, but u must held all the copyright items!*/var ie = (document.getelementbyid && document.all);var ns = (document.getelementbyid && !document.all);function getrndnum(min,max){ var range = max - min; var rand = math.random(); return(min + math.round(rand * range));}function picitem(pic, width, height) { this.img = new image(); this.pic = pic; this.width = width; this.height = height;}var pic_list = new array();var n=0, pic_cur=0, clips=3;pic_list[n++] = new picitem("http://www.mbavoice.net/windy/clip/pic0001.jpg", 430, 261);pic_list[n++] = new picitem("http://www.mbavoice.net/windy/clip/pic0002.jpg", 430, 331);pic_list[n++] = new picitem("http://www.mbavoice.net/windy/clip/pic0003.jpg", 430, 378);pic_list[n++] = new picitem("http://www.mbavoice.net/windy/clip/pic0004.jpg", 430, 514);pic_list[n++] = new picitem("http://www.mbavoice.net/windy/clip/pic0005.jpg", 430, 255);pic_list[n++] = new picitem("http://www.mbavoice.net/windy/clip/pic0006.jpg", 430, 450);pic_list[n++] = new picitem("http://www.mbavoice.net/windy/clip/pic0007.jpg", 430, 386);pic_list[n++] = new picitem("http://www.mbavoice.net/windy/clip/pic0008.jpg", 430, 386);pic_list[n++] = new picitem("http://www.mbavoice.net/windy/clip/pic0009.jpg", 430, 441);pic_list[n++] = new picitem("http://www.mbavoice.net/windy/clip/pic0010.jpg", 430, 472);var pic_clip_all = new array();var pic_clip = document.createelement("div");var layer_cur = null;var px = 0 ; py = 0; zidx = 1;pic_clip.innerhtml = "<img src='' border='0' style='top:0px;left:0px;position:relative' />";pic_clip.style.csstext = "background-color:white; cursor:pointer; position:absolute; overflow: hidden; padding:0px; border:1px black solid; zindex:" + zidx;var the_width=100, the_height=100, clip_num=0;var flip_list = ["flipv", "flipv fliph", "fliph", "",];var zwidth = screen.width * 0.8, zheight = screen.height * 0.8 , zrate=0;function changemode(idx) { for(var i=0; i<pic_clip_all.length; i++) { for(var j=0; j<pic_clip_all[i].length; j++) { pic_clip_all[i][j].parentnode.removechild(pic_clip_all[i][j]); } } var if_zoom = document.getelementbyid("zoom").checked; if(if_zoom) { the_width = math.floor(zwidth *(zrate>1?1:zrate)/idx); the_height = math.floor(zheight/(zrate>1?zrate:1)/idx); } else { the_width = math.floor(pic_list[pic_cur].width/idx); the_height = math.floor(pic_list[pic_cur].height/idx); } pic_clip_all = new array(idx); clip_num = math.pow(idx, 2); for(i=0; i<idx; i++) { pic_clip_all[i] = new array(idx); for(j=0; j<idx; j++) { pic_clip_all[i][j] = pic_clip.clonenode(true); with(pic_clip_all[i][j].style) { width = the_width; height = the_height; top = getrndnum(100, 400); left = getrndnum(100, 600); } with(pic_clip_all[i][j]) { if(if_zoom) { firstchild.width = math.floor(zwidth *(zrate>1?1:zrate)); firstchild.height = math.floor(zheight/(zrate>1?zrate:1)); } id = "clip_" + i + "_" + j; if(ie) { onmousedown = new function("if(this.snap=='yes')return; this.style.zindex=zidx++; layer_cur=this; px=event.clientx-this.offsetleft; py=event.clienty-this.offsettop;"); oncontextmenu = new function("event.returnvalue=false; if(this.snap=='yes')return; var flip_idx=(parseint(this.flip_idx)+1)%4; this.style.filter=flip_list[flip_idx]; this.flip_idx=flip_idx;"); firstchild.src = pic_list[pic_cur].pic; firstchild.style.pixelleft = - j * the_width; firstchild.style.pixeltop = - i * the_height; pic_clip_all[i][j].flip_idx = 0; if(flip.checked) { var rnd = getrndnum(0,7); if(rnd<4) { style.filter=flip_list[rnd]; pic_clip_all[i][j].flip_idx = rnd; } } } else { onmousedown = function(e){ if(e.target.parentnode.snap=='yes')return; e.target.parentnode.style.zindex = zidx++; layer_cur = e.target.parentnode; if(layer_cur.snap=="yes") return; px=e.clientx-layer_cur.offsetleft; py=e.clienty-layer_cur.offsettop; }; } } document.body.appendchild(pic_clip_all[i][j]); if(ns) { with(pic_clip_all[i][j].firstchild) { src = pic_list[pic_cur].pic; style.left = - j * the_width; style.top = - i * the_height; style.position = "relative"; } } } } document.getelementbyid("board").innerhtml = ""; buildtbl(document.getelementbyid("board")); return;}function buildtbl(obj) { var the_tbl = document.createelement("table"); the_tbl.id = "spl_board"; the_tbl.border = 1; the_tbl.style.csstext = "padding:0px; border-collapse:collapse;background-color:#000000"; if(document.getelementbyid("zoom").checked) { the_tbl.style.width = math.floor(zwidth *(zrate>1?1:zrate)); the_tbl.style.height = math.floor(zheight/(zrate>1?zrate:1)); } else { the_tbl.style.width = pic_list[pic_cur].width; the_tbl.style.height = pic_list[pic_cur].height; } for(var i=0; i<clips; i++) { var the_row = the_tbl.insertrow(i); for(var j=0; j<clips; j++) { var the_cell = the_row.insertcell(j); the_cell.style.width = the_width; the_cell.style.height = the_height; the_cell.mark = "clip_" + i + "_" + j; } } obj.appendchild(the_tbl); return;}function picadd(the_pic, pic_width, pic_height) { the_pic = the_pic.replace(/\\/g,"/"); if(!ie) the_pic = "file:///" + the_pic; pic_list[n] = new picitem(the_pic, pic_width, pic_height); var the_sel = document.getelementbyid("sel").lastchild; the_sel.options[the_sel.options.length] = new option(pic_list[n].pic.replace(/^(.*)?\/([^\/]*)$/,"$2")); the_sel.selectedindex = pic_cur = n++; picchg();}function picchg() { var the_img = "<img "; the_img += "src='"+pic_list[pic_cur].pic+"' "; zrate = (pic_list[pic_cur].width/pic_list[pic_cur].height) / (4/3); if( zrate > 1 ) { the_img += "width='100%' "; } else { the_img += "height='100%' "; } the_img += "/>"; document.getelementbyid("show").innerhtml = the_img;}function picsel(obj) { var the_sel = document.createelement("select"); the_sel.id = "pic_sel"; for(var i=0; i<n; i++) { the_sel.options[i] = new option(pic_list[i].pic.replace(/^(.*)?\/([^\/]*)$/,"$2")); } the_sel.onchange = new function("pic_cur=this.selectedindex;picchg()"); obj.appendchild(the_sel); return;}function modesel(obj) { var the_sel = document.createelement("select"); the_sel.id = "mode_sel"; for(var i=3; i<=6; i++) { the_sel.options[i-3] = new option(i + " * " +i); } the_sel.onchange = new function("clips=this.selectedindex+3"); obj.appendchild(the_sel); return;}function get_pos(the_obj){ the_top = the_obj.offsettop - document.body.scrolltop; the_left = the_obj.offsetleft - document.body.scrollleft; the_obj = the_obj.offsetparent; while(the_obj){ the_top += the_obj.offsettop; the_left += the_obj.offsetleft; the_obj = the_obj.offsetparent; } this.top = the_top; this.left = the_left; }function isbetween(nummin, numcheck, nummax) { return (nummin<numcheck && numcheck<nummax);}function getcell(x, y) { var spl_board = document.getelementbyid("spl_board"); for(var i=0; i<spl_board.rows.length; i++) { var the_row = spl_board.rows[i]; for(var j=0; j<the_row.cells.length; j++) { var the_cell = the_row.cells[j]; pos = new get_pos(the_cell); if(isbetween(0, y-pos["top"], the_cell.offsetheight) && isbetween(0, x-pos["left"], the_cell.offsetwidth)) { return the_cell; } } } return false;}function showtbl(e) { if(ie) e = event; var the_tbl = document.getelementbyid("tbl"); if(the_tbl.style.display == "none") { the_tbl.style.display = ""; } else { the_tbl.style.display = "none"; } return;}var color_list = ["#ffffff","#eeeeee","#dddddd","#cccccc","#bbbbbb","#aaaaaa","#999999","#888888","#777777","#666666","#555555","#444444","#333333","#222222","#111111","#000000"];var curidx = 0;function flashtbl() { var spl_board = document.getelementbyid("spl_board"); spl_board.style.backgroundcolor = color_list[curidx++]; if(curidx==color_list.length) { curidx = 0; } else { settimeout("flashtbl()",25); } return;}window.onload = function() { picsel(document.getelementbyid("sel")); modesel(document.getelementbyid("mode")); picchg(); for(var i=0; i<n; i++) { pic_list[i].img.src = pic_list[i].pic; } if(ns) document.getelementbyid('tbl').style.position="";}if(ns) window.captureevents(event.mousemove|event.mouseup)document.onmousemove = function(e) { if(ie) e = event; if(layer_cur != null) { var the_top = e.clienty - py; var the_left = e.clientx - px; layer_cur.style.top = the_top>0?the_top:0; layer_cur.style.left = the_left>0?the_left:0; if(ie) layer_cur.setcapture(); }}document.onmouseup = function(e){ if(ie) e = event; if(layer_cur != null) { if(layer_cur.id != "tbl") { the_cell = getcell(e.clientx, e.clienty); if(the_cell) { if(the_cell.mark == layer_cur.id) { layer_cur.style.position = "static"; if(ie) layer_cur.style.filter = ""; the_cell.appendchild(layer_cur); layer_cur.snap = "yes"; flashtbl(); clip_num--; if(clip_num == 0) alert("victory !"); } } } if(ie) layer_cur.releasecapture(); layer_cur = null; px = py = 0; }}document.onkeypress = function(e) { if(ie) e = event; var keycode = e.keycode; if(keycode == 27){ showtbl(); }} document.onselectstart = new function("return false");</script><body bgcolor="#ffffee"><div align=center>please use <font color="red">esc</font> or <font color="red" style="cursor:pointer" onclick="showtbl()">click here</font> to show or hide the condition layer !</div><br /><table id="tbl" style="border:black 1px solid; width:220px; position:absolute; top:10px; left:10px; background-color:#ffffee; z-index:9999" align="center"> <tr style="cursor:move; background-color:#cccccc;" onmousedown="layer_cur=document.getelementbyid('tbl'); px=event.clientx-layer_cur.offsetleft; py=event.clienty-layer_cur.offsettop;"> <td align="right"> <span style="cursor:pointer; text-align:center; font-family:webdings;" onclick="var the_tbl=document.getelementbyid('tbl'); if(this.innertext=='1'){this.innertext='2';the_tbl.rows[2].style.display='none';}else{this.innertext='1';the_tbl.rows[2].style.display=''}">1</span> <span style="cursor:pointer; text-align:center; font-family:system;" onclick="document.getelementbyid('tbl').style.display='none'">x</span>  </td> </tr> <tr><td align="center" valign="top"> <div id="show" style="text-align:center; width:200px; height:150px; margin:0px; padding: 0px; overflow: hidden"></div> </td></tr> <tr><td> <div align="center"> <div id="sel" >picture select: </div><br /> <div id="mode">  mode  select: </div><br /> <div>add new pic:    <input type="file" title="u can input the full url in the browse box !" style="width:0px;border:0px" onchange="if(ie){document.getelementbyid('cimg').src=this.value;}else{picadd(this.value,640,480)}" onclick="if(ns)this.blur()"></div><br /> <div align="center"><input type="checkbox" id="flip"><label for="flip"> flip ( ie only ) </label> <input type="checkbox" id="zoom"><label for="zoom"> zoom </label></div><br /> <div><input type="button" value="spelling !" onclick="changemode(clips)"></div> </div> </td></tr></table><div id="board" align=center></div><img id="cimg" style="position:absolute; display:none; top:1000px;" onload="this.style.display='';picadd(this.src, this.offsetwidth, this.offsetheight);this.style.display='none'" onerror="if(this.src!=null)alert('error occured in reading!')"></body> [ctrl+a 十足采用 提醒：你可先窜改局部代码，再按运转]（根源：蓝色理念）