不用切图，只要设置基本的 图片及其属性即可！
用鼠标右键控制图片翻转！
<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>
本文作者: