<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
body
{
-moz-user-focus:ignore; /*ff中禁止鼠标选择*/
-moz-user-input:disabled;
-moz-user-select:none;
}
#content{
margin:0 auto;
text-align:center;
position:relative;
background-color:#ddd;
width:1200px;
height:500px;
}
#checks{
position:absolute;
left:200px;
top:100px;
z-index:1;
width:100px;
height:350px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="content">
<div id="checks">
<form id="form1">
<ul>
<li><label for="1">编号01：</label><input id="1" type="checkbox" /></li>
<li><label for="2">编号02：</label><input id="2" type="checkbox" /></li>
<li><label for="3">编号03：</label><input id="3" type="checkbox" /></li>
<li><label for="4">编号04：</label><input id="4" type="checkbox" /></li>
<li><label for="5">编号05：</label><input id="5" type="checkbox" /></li>
<li><label for="6">编号06：</label><input id="6" type="checkbox" /></li>
<li><label for="7">编号07：</label><input id="7" type="checkbox" /></li>
<li><label for="8">编号08：</label><input id="8" type="checkbox" /></li>
<li><label for="9">编号09：</label><input id="9" type="checkbox" /></li>
<li><label for="10">编号10：</label><input id="10" type="checkbox" /></li>
<li><label for="11">编号11：</label><input id="11" type="checkbox" /></li>
<li><label for="12">编号12：</label><input id="12" type="checkbox" /></li>
<li><label for="13">编号13：</label><input id="13" type="checkbox" /></li>
<li><label for="14">编号14：</label><input id="14" type="checkbox" /></li>
<li><label for="15">编号15：</label><input id="15" type="checkbox" /></li>
<li><label for="16">编号16：</label><input id="16" type="checkbox" /></li>
<li><label for="17">编号17：</label><input id="17" type="checkbox" /></li>
<li><label for="18">编号18：</label><input id="18" type="checkbox" /></li>
<li><label for="19">编号19：</label><input id="19" type="checkbox" /></li>
</ul>
</form>
</div>
</div>
<script>
/*
* 鼠标移动形成的选择框来选择checkbox；
* made by keimon
* 2013-03-20
*/
$(function(){
//设置content的宽度是窗口宽度；高度是窗口高度；
$('#content').width($(window).width());
$('#content').height($(window).height());
//取消鼠标移动对元素的选择作用；
document.onselectstart = document.oncontextmenu = function(){return false}
//x1,y1是鼠标按下时光标的位置，x2，y2是鼠标移动时光标的位置；
var x1=0, x2=0, y1=0, y2=0;
//w是选择框的宽度，h是选择框的高度，l是选择框离左边窗口的距离，t是选择框离上边窗口的距离；
var w=0, h=0, l=0, t=0;
//用于判断鼠标是否按下；
var isDown = false;
//box用于放置选择框div；
var box=null;
//选择框的样式
var boxStyle = {
width:'10px',
height:'10px',
top:'0px',
height:'0px',
position:'absolute',
border:'1px solid #CCCCCC',
'background-color':'#FFFFCC',
opacity:'0.3',
filter:'alpha(opacity:30)',
'z-index':'10'
}
$(document).mousedown(function(event){
isDown = true;
x1 = event.pageX;
y1 = event.pageY;
//创建选择框；
box = document.createElement('div');
$(box).css(boxStyle);
$('#content').append($(box));
})
$(document.body).mousemove(function(event){
if(isDown){
x2 = event.pageX;
y2 = event.pageY;
w = Math.abs(x1-x2);
h = Math.abs(y1-y2);
l = x1<x2 ? x1:x2;
t = y1<y2 ? y1:y2;
$(box).css({left:l+'px',top:t+'px',width:w+'px',height:h+'px'});
}
})
$(document).mouseup(function(){
isDown = false;
$('#content').find($(box)).remove();
for(var i=0; i<$('li').length; i++){
//下面注释掉的是用原生js获得元素相对于当前窗口的位置；
//var tt = $('li').eq(i).get(0).offsetParent.offsetTop + $('li').eq(i).get(0).offsetTop;
//var ll = $('li').eq(i).get(0).offsetParent.offsetLeft + $('li').eq(i).get(0).offsetLeft;
//jquery的offset获得元素相对于当前窗口的位置
var tt = $('li').eq(i).offset().top;
var ll = $('li').eq(i).offset().left;
if(ll>l && ll<l+w && tt>t && tt<t+h){
$('li').eq(i).find('input').attr('checked',!$('li').eq(i).find('input').attr('checked'));
}
}
})
})
</script>
</body>
</html>
644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
