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

">

大屏屏幕

/css/font.css" rel="stylesheet" type="text/css" />

var canChange = 1;
var candraw = 1;
function main_mouseup()
{
candraw = 0;
}
function init()
{
var aDivs = document.getElementsByTagName("div");
for (var i=0; iid2)&&(id1%list>id2%list)) {startP = id2;endP = id1;}
else{
//alert(DisY);
startP = (id1');
}else{
candraw = 0;
document.getElementById("startid").value = startId;
document.getElementById("endid").value = endId;
window.parent.screenEvent(startId,endId,'');
}
}
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 }
};
}};

document.write('

');
document.write('

');

number=1;
number1=1;
var i;
up=5;
list=8;
for(i=0;i

');
if((i

');

number++;
}
}
document.write('

');
document.write('

');
document.write('

');
document.write('

');

function resetcheck(){
for(i=0;i

end id -->

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

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

    "> 大屏屏幕 /css/font.css" rel="stylesheet" type="text/css" /> var canChange = 1; var candraw = 1; function main_mouseup() { candraw = 0; } function init() { var aDivs = document.getElementsByTagName("div"); for (

  • JS实现状态栏跑马灯文字效果代码

    JS实现状态栏跑马灯文字效果代码

    本文实例讲述了JS实现状态栏跑马灯文字效果代码.分享给大家供大家参考,具体如下: 这款状态栏跑马灯,文字跑动的定义在数组内,自己可修改内容.现在的IE8貌似不兼容,有缺憾的代码,欢迎JS爱好者修正,修正请发回一份.状态栏为效果显示区. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ztlpmd-txt-style-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>间隔状态栏跑马灯</T

  • JS实现的不规则TAB选项卡效果代码

    JS实现的不规则TAB选项卡效果代码

    本文实例讲述了JS实现的不规则TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款采用菱形的选项卡效果,一改选项卡中规中矩的风格,效果非常不错,奉献给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-bgz-tab-cha-style-codes/ 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="

  • js淡入淡出焦点图幻灯片效果代码分享

    js淡入淡出焦点图幻灯片效果代码分享

    本文实例讲述了javascript淡入淡出焦点图幻灯片效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的淡入淡出焦点图幻灯片效果代码,可以自定义标题,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js淡入淡出焦点图幻灯片效果代码如下 <head> <meta http-equiv="Content-Ty

  • JS实现拖动滚动条评分的效果代码分享

    小编教你JS特效拖动滚动条可以评分效果,小编感觉挺不错,用时候可能需要ASP/PHP或其它语言配合取值并写入数据库,这是前台的实现. 直接上代码 看看JS的神奇吧! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>

  • JS实现自动变换的菜单效果代码

    JS实现自动变换的菜单效果代码

    本文实例讲述了JS实现自动变换的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款自动变换的JS菜单,由原来的一款自动TAB修改而成的,有需要的就拿去,代码内有几个JS函数,分别用来控制TAB的自动切换. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • JS实现3D图片旋转展示效果代码

    JS实现3D图片旋转展示效果代码

    本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c

  • js实现的tab标签切换效果代码分享

    js实现的tab标签切换效果代码分享

    这是一款基于js实现的tab标签切换效果,是一款无需jQuery,原生javascript制作的tab切换效果源码.点击上面的标题即可实现对应页面的切换功能,非常具有实用价值. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现的tab标签切换效果代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

  • js鼠标点击图片切换效果代码分享

    js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

  • JS实现IE状态栏文字缩放效果代码

    JS实现IE状态栏文字缩放效果代码

    本文实例讲述了JS实现IE状态栏文字缩放效果代码.分享给大家供大家参考,具体如下: 这里演示状态栏文字缩放变化效果,同样基于JavaScript技术,虽然很不起眼的小特效,不过对学习JS来说,还是很有用的.本效果直接运行可能看不到效果,你可以复制代码保存成一个HTML文件,双击后运行可看到效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ie-ztl-txt-style-demo/ 具体代码如下: <HTML> <HEAD&g

随机推荐