简单一点地说!就好像在windows桌面上我需要选择多个图标的时候,我可以按住鼠标左键然后拖动就ok了!这样就可以选到我需要的那几个!如同这个操作方法!利用jS使鼠标在网站上可以进行括选!
括第一次就是打钩,第二次,就是取消!我在网上见过!当时我是搜索“JS全选”,但是因为看的网站太多了!我误关了TT,而TT的记忆又不是很多!而我又设置了删除历史记录!所以找不到这个特效!对于这个特效如果使用在网站后台那里!会十分方便!所以希望有JS高手能帮帮忙!
我在其他地方都问过了!和多都是问非所答的!希望各位回复前!先了解特效的效果!还不明白可以加我QQ82279178
括第一次就是打钩,第二次,就是取消!我在网上见过!当时我是搜索“JS全选”,但是因为看的网站太多了!我误关了TT,而TT的记忆又不是很多!而我又设置了删除历史记录!所以找不到这个特效!对于这个特效如果使用在网站后台那里!会十分方便!所以希望有JS高手能帮帮忙!
我在其他地方都问过了!和多都是问非所答的!希望各位回复前!先了解特效的效果!还不明白可以加我QQ82279178
http://blog.csdn.net/jaketseng/archive/2009/02/18/3905733.aspx
没有写使用说明!
再顶一下先!希望高手能快点出现!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript">
var downX;
var downY;
var isSelecting = false;
function mUp(ev) { var region = document.getElementById("region");
region.style.display = "none";
if (!ev) ev = window.event;
if (isSelecting) {
isSelecting = false;
var inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
if (jiechu(downX, downY, ev.clientX, ev.clientY, inputs[i])){
inputs[i].checked = true;
}
}
}
}
}
function jiechu(ax, ay, bx, by, cb) {
var cbx=getX(cb);
var cby = getY(cb);
var cbw = cb.clientWidth;
var cbh = cb.clientHeight;
if ((cbx - ax) * (cbx - bx) < 0 && (cby - ay) * (cby - by) < 0) return true;
if ((cbx - ax) * (cbx - bx) < 0 && ((cby + cbh) - ay) * ((cby + cbh) - by) < 0) return true;
if (((cbx + cbw) - ax) * ((cbx + cbw) - bx) < 0 && (cby - ay) * (cby - by) < 0) return true;
if (((cbx + cbw) - ax) * ((cbx + cbw) - bx) < 0 && ((cby + cbh) - ay) * ((cby + cbh) - by) < 0) return true;
return false;
}
function getX(obj) {
return obj.offsetLeft + (obj.offsetParent ? getX(obj.offsetParent) : obj.x ? obj.x : 0);
}
function getY(obj) {
return (obj.offsetParent ? obj.offsetTop + getY(obj.offsetParent) : obj.y ? obj.y : 0);
}
function mDown(ev) {
if (!ev) ev = window.event;
isSelecting = true;
downX = ev.clientX;
downY = ev.clientY; var region = document.getElementById("region");
region.style.top = downY + "px";
region.style.left = downX + "px";
region.style.display = "block";
}
function mMove(ev) { if (!ev) ev = window.event; var region = document.getElementById("region");
if (ev.clientX > downX) {
region.style.left = downX + "px";
}
else {
region.style.left = ev.clientX + "px";
}
if (ev.clientY > downY) {
region.style.top = downY + "px";
}
else {
region.style.top = ev.clientY + "px";
}
region.style.width = Math.abs(ev.clientX - downX) + "px";
region.style.height = Math.abs(ev.clientY- downY) + "px";
}
</script>
</head>
<body onmousedown="mDown(event)" onmousemove="mMove(event)" onmouseup="mUp(event)">
<div id="region" style="position:absolute;top:0px;left:0px;border:1px red solid;display:none"></div>
<table id="tbl">
<tr>
<td>
<input id="Checkbox1" type="checkbox" />aa
</td>
<td>
<input id="Checkbox2" type="checkbox" />bb
</td>
<td>
<input id="Checkbox3" type="checkbox" />cc
</td>
</tr>
<tr>
<td>
<input id="Checkbox4" type="checkbox" />dd
</td>
<td>
<input id="Checkbox5" type="checkbox" />ee
</td>
<td>
<input id="Checkbox6" type="checkbox" />ff
</td>
</tr>
<tr>
<td>
<input id="Checkbox7" type="checkbox" />gg
</td>
<td>
<input id="Checkbox8" type="checkbox" />hh
</td>
<td>
<input id="Checkbox9" type="checkbox" />ii
</td>
</tr>
</table>
</body>
</html>
{//获取对象
return document.all[id]?document.all[id]:document.getElementById(id);
}
function CurrentCheckbox(chekObj,controlObj)
{//多选
if($gzeeId(controlObj))
{
if(chekObj.checked)
{
var _val=$gzeeId(controlObj).value;
if(_val)
{
$gzeeId(controlObj).value=$gzeeId(controlObj).value+chekObj.value+",";
return;
}else
{
$gzeeId(controlObj).value=chekObj.value+",";
}
}else
{
$gzeeId(controlObj).value=$gzeeId(controlObj).value.toString().replace(/undefined/g,"").replace(chekObj.value+",","");
}
}else
{
alert("对不起,对象不存在!");
}
}
调用:CurrentCheckbox(this)