DHTML打造PictureSpelling
添加时间: 2005-6-9 4:59:27 作者: 网络收集 阅读次数:73 来源: http://d9soft.com
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.MOUSEMOVEEvent.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 />
DHTML打造PictureSpelling(3) 第 [1] [2] [3] [4] 下一页
上下文章:
上一篇文章: 事件触发列表与解说 下一篇文章: 鼠标实现图片的渐有渐无
相关文章: