JS多个矩形块选择效果代码(模拟CS结构)- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS多个矩形块选择效果代码(模拟CS结构)

Javascript: jQuery代码:jQuery控制表单里的回车键; 用DIV完美模拟createPopup 弹出窗口(脚本之家修正版)，支持Firefox,ie,chrome; jQuery Flash/MP3/Video多媒体插件; 9个JavaScript评级/投票插件; JS实现的radio图片选择按钮效果; IE中checkbox在刷新后初始化的问题; JavaScript 学习笔记（十一）; JS 对象介绍; javascript 哈希表(hashtable)的简单实现; jquery 防止表单重复提交代码; js parsefloat parseint 转换函数; javascript parseInt与Number函数的区别; JavaScript 学习笔记（十二） dom; JavaScript 学习笔记（十三）Dom创建表格; javascript 实现自由落体的方块效果; javascript 获取url参数和script标签中获取url参数函数代码; JAVASCRIPT style 中visibility和display之间的区别; javascript 拖放效果实现代码; jquery last-child 列表最后一项的样式; Jquery实战_读书笔记1—选择jQuery

No. « ‹ 279 280 281 282 › »

技术文章搜索

关键字

Javascript 中的 JS多个矩形块选择效果代码(模拟CS结构)

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 64 ::

收藏到网摘: n/a

一个仿Windows UI的html table，兼容IE和firefox [原创]关键字空格替换为逗号的js代码

非常不错的可以选择多个矩形块的功能代码

点击运行可以看到效果:

<html>
<head>
<base href="<%=basePath%>">
<title>大屏屏幕</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="<%=path%>/css/font.css" rel="stylesheet" type="text/css" />
<SCRIPT LANGUAGE="JavaScript">
var canChange = 1;
var candraw = 1;
function main_mouseup()
{
candraw = 0;
}
function init()
{
var aDivs = document.getElementsByTagName("div");
for (var i=0; i<aDivs.length; i++) {
new neverDragDivision(aDivs[i]);
}
}
function changeColorToSelected(id)
{
id1=""+id;
var td =document.getElementById(id1);
td.bgColor = "#0000C6";
}
function changeColorToNotSelected(id)
{
id1=""+id;
var td =document.getElementById(id1);
td.bgColor = "#BEBEBE";
}
function changecolor(id)
{
if(canChange == 1)
{
if(id<1000)
{
id1=""+id;
var td =document.getElementById(id1);
var str = td.bgColor;
//alert(str);
var str1 = "#bebebe"; //黑色
var str2 = "#008000"; //绿色
if(str == str1)
{
td.bgColor = "#0000C6"; //red说明这个位置可以放！
// ps[id] = 1;
}
else
{
//ps[id] = 0;
td.bgColor = "#BEBEBE";
}
}
else
{
id1=""+id;
var td =document.getElementById(id1);
var str = td.bgColor;
var str2 = "#008000"; //绿色
if(str == str2)
{
td.bgColor = "white";
isHasChang=0;
}
else td.bgColor = "green";
{
isHasChang=1;
}
}
}
}
var startId;
var endId;
var list = 5;
var up = 5;
var down = 6;
var selectFun = 0;
function changeStart(id)
{
resetcheck();
candraw = 1;
switch(event.button)
{
case 1: selectFun = 0; break;
case 2: selectFun = 1; break;
}
//获得鼠标按下的那个格子的ID，来确定是哪个格子
//alert('start');
startId = id;
}
function changeColorBySE(id1,id2)
{
var Sx,Sy,Ex,Ey;
var startP; //the last start point
var endP; //the end point
var changeId;
Sx = id1%list;
Sy = Math.floor(id1/list);
//alert(Sy);
Ex = id2%list;
Ey = Math.floor(id2/list);
DisX = Math.abs(Sx-Ex); //差距为几列
//alert("DisX:"+DisX);
DisY = Math.abs(Sy-Ey); //差距为几行
//alert("DisY:"+DisY);
//这个函数功能是将所有的矩形开始结束全部转变为左上右下
function StartChange(id1,id2)
{
if((id1<id2)&&(id1%list<id2%list)) {startP = id1;endP = id2;}
else if((id1>id2)&&(id1%list>id2%list)) {startP = id2;endP = id1;}
else{
//alert(DisY);
startP = (id1<id2)?(id1-DisX):(id2-DisX);
endP = (id1<id2)?(id2+DisY):(id1+DisY);
}
//alert("startP:"+startP+"endP:"+endP);
}
//开始点在结束点的下面
//转换包含(Sx,Sy),(Ex,Ey)区域的颜色
StartChange(id1,id2);
for(i=0;i<DisY+1;i++)
{
for(j=0;j<DisX+1;j++)
{
changeId = startP+j+i*list;
//alert(changeId);
selectFun == 0?changeColorToSelected(changeId):changeColorToNotSelected(changeId);
}
}
//alert(Sx);
}
function changUpEnd()
{
if(startId == endId){
candraw = 1;
changeColorToNotSelected(startId);
document.getElementById("startid").value = startId;
document.getElementById("endid").value = startId;
window.parent.screenEvent(startId,startId,'<%=sSingalID%>');
}else{
candraw = 0;
document.getElementById("startid").value = startId;
document.getElementById("endid").value = endId;
window.parent.screenEvent(startId,endId,'<%=sSingalID%>');
}
}
function changeEnd(id)
{
//获得了最后的一个格子。
if(candraw == 1){
endId = id;
//alert(endId);
//算法
/*
*根据起始ID 和 最后ID来确定是哪些格子变
* 计算start和end的行，列数
*/
changeColorBySE(startId,endId);
}
}
function neverDragDivision(fObj) { with (this)
{
if (!fObj) return;
this.bDraged = false;
this.oDragOrig = fObj;
oDragOrig.onmousedown = function()
{
oDragOrig.style.backgroundColor="#FFFFFF";
//alert(event.clientY);
//alert(oDragOrig.offsetTop);
//var ofs = Offset(oDragOrig);
// oDragOrig.style.position = "absolute";
//oDragOrig.style.left = ofs.l;
//oDragOrig.style.top = ofs.t;
//alert(oDragOrig.style.top);
//oDragOrig.X = event.clientX - ofs.l;
//oDragOrig.Y = event.clientY - ofs.t;
bDraged = true;
};
/*
oDragOrig.onmousemove = function()
{
if (!bDraged) return;
oDragOrig.setCapture();
oDragOrig.style.left = event.clientX - oDragOrig.X;
oDragOrig.style.top = event.clientY - oDragOrig.Y;
};*/
/*
oDragOrig.onmouseup = function()
{
bDraged = false;
oDragOrig.releaseCapture();
};*/
function Offset(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while(ee=e.offsetParent) {
t+=e.offsetTop;
l+=e.offsetLeft;
}
return { t:t, l:l, w:w, h:h }
};
}};
</SCRIPT>
<style type="text/css">
</style>
</head>
<body onselectstart="return false" oncontextmenu="window.event.returnValue=false" onmouseup=main_mouseup()>
<center>
<script>
document.write('<table border="0" align="center">');
document.write('<tr>');
number=1;
number1=1;
var i;
up=5;
list=8;
for(i=0;i<(up*list);i++)
{
document.write('<td width="60" height="60" bgColor="#BEBEBE" id="'+i+'" onmouseMove="changeEnd(parseInt(id))" onmouseUp="changUpEnd()" onmouseDown="changeStart(parseInt(id))" onclick="changecolor(parseInt(id))")></td>');
if((i<((up*list)-list))&&(i+1)%list==0)
{
document.write('</tr><tr>');
number++;
}
}
document.write('</tr><tr>');
document.write('<td>');
document.write('</td>');
document.write('</tr></table>');
function resetcheck(){
for(i=0;i<(up*list);i++){
changeColorToNotSelected(i);
}
}
</script>
</center>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

一个仿Windows UI的html table，兼容IE和firefox [原创]关键字空格替换为逗号的js代码

Javascript 中的 JS多个矩形块选择效果代码(模拟CS结构)

评论 (0) All