DHTML 打造 Picture Spelling

• 关 键 词：
• javascript
• window
• flash
• html
• .net

不用切图，只要设置基本的 图片及其属性即可！

用鼠标右键控制图片翻转！

<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>&nbsp; </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">&nbsp; Mode &nbsp;Select: </div><br /> <div>Add New Pic: &nbsp; &nbsp;<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 全部选择 提示：你可先修改部分代码，再按运行]

您可以到此→http://www.blueidea.com/bbs/newsdetail.asp?id=1013969参加讨论或获得更多信息。

【深 度 阅 读】 相 关 文 章

• 实例演示:使用ASP生成HTML文件
• 一种html模版输出方式
• 制作HTML帮助
• VC7 HTML Dialog开发实例讲解