鼠标移动形成选择框-选择checkbox
<!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>
