鼠标移动形成选择框-选择checkbox

最新推荐文章于 2022-07-27 09:37:55 发布

iteye_6992

最新推荐文章于 2022-07-27 09:37:55 发布

阅读量673

点赞数

分类专栏： jquery 文章标签： jquery ViewUI

jquery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!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>

//取消鼠标移动对元素的选择作用；
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>