x轴方向的4种情况,y轴方向也有类似的4种情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片选择</title>
<style>
.queue-item{position:relative;border:1px solid #dedede;padding:1px;background:#fff;display:inline-block;*display:inline;*zoom:1;overflow:hidden;float: left;margin:0 12px 20px 0; background-color: #fff;}
.queue-item .picitem{position:relative;overflow:hidden;float:left;}
.queue-item,.queue-item .picitem{width:110px;height:94px;}
.checkpic{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color: rgba(0, 0, 0, 0.5);filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7F000000, endColorstr=#7F000000);}
.ticon-check{background-position:-280px -345px;width:60px;height:26px;position:absolute;top:50%;left:50%;margin-top:-13px;margin-left:-30px;}
.picname{position:absolute;bottom:0;left:0;width:100%;height:22px;line-height:22px;font-size:12px;color:#fff;text-indent:5px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;background-color: rgba(0, 0, 0, 0.5);filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7F000000, endColorstr=#7F000000);}
.queue-item .picdel{display:none;position:absolute;bottom:1px;right:1px;background:#000;width:22px;height:22px;cursor:pointer;}
.queue-item .picdel .ticon{margin-left:3px;}
.picdel .ticon-del{background-position:-16px -280px; color: #fff; font-size: 10px;}
.queue-item-selected .checkpic .ticon-check{background-position:-280px -345px;}
.queue-item:hover .checkpic,
.queue-item-hover .checkpic,
.queue-item-selected .checkpic{display:block; color: #fff;}
.picitem img{vertical-align: middle;max-width: 100%;}
.queuebox{height: 350px;overflow-y:auto;overflow-x: hidden;}
.queueinner{padding:1px 10px;overflow:hidden;margin-right:-10px;}
.queue-item:hover .picdel{display:block;}
.comeon a{color:#07C;}
.comeon a:hover{color:#e38;}
#box{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; display:none; }
.picname{ -moz-user-select:none; -webkit-user-select:none; user-select:none; }
</style>
</head>
<body onselectstart="return false">
<div>
<div id="upload-content" class="tday upload-content oper-content">
<div class="hr_a"></div>
<!--<p class="linebox"><span class="linetext f22 yahei">照片整理</span></p>-->
<div class="upload-box">
<div class="sortright">
<div class="queuebox">
<div class="queueinner">
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/1.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/2.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/3.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/4.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/5.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del"></i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/6.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/7.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/8.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/9.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/0.jpg" alt="" /><span class="picname">如果文字过长会怎么样示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/1.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/2.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/3.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/4.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/5.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/6.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/7.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/8.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/9.jpg" alt="" /><span class="picname">示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
<div class="queue-item">
<span class="picitem"><i class="middle-full"></i><img src="img/0.jpg" alt="" /><span class="picname">如果文字过长会怎么样示例图片.JPG</span></span>
<span class="checkpic"><i class="ticon ticon-check">选择</i></span>
<span class="picdel"><i class="ticon ticon-del">删</i></span>
</div>
</div><!--//.queueinner-->
</div><!--//.queuebox-->
</div><!--//.sortright-->
</div>
</div>
</div>
<!-- 多图上传插件 -->
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<!--<script src="test.js"></script>-->
<script>
$(".queuebox").delegate("div.queue-item","click",function(){
$(this).toggleClass("queue-item-selected");
})
$(function(){
var _bool = false, _hasMove = false;
var startX, startY, endX, endY,boxX,boxY,boxW,boxH;
if($('#box').length == 0){
$('body').append('<div id="box">');
}
var $box = $('#box');
$('.sortright').bind('mousedown', function(e){
_bool = true;
startX = e.pageX;
startY = e.pageY;
})
$(document).bind('mousemove', function(e){
if(!_bool){
return false;
}
_hasMove = true;
endX = e.pageX;
endY = e.pageY;
boxX = startX > endX ? endX : startX;
boxY = startY > endY ? endY : startY;
boxW = Math.abs(startX - endX);
boxH = Math.abs(startY - endY);
$box.css({'left':boxX+'px', 'top':boxY+'px', width:boxW+'px', height:boxH+'px'}).show();
})
$(document).bind('mouseup', function(){
if(_bool){
if(_hasMove){
var len = $('.picitem').length;
for(var i=0; i<len; i++){
var picL = $('.picitem').eq(i).offset().left,
picT = $('.picitem').eq(i).offset().top,
picW = $('.picitem').outerWidth(),
picH = $('.picitem').outerHeight(),
picR = picL + picW,
picB = picT + picH;
/*
以中心点判断是否选择;
var picCenterL = picL + picW/2;
var picCenterT = picT + picH/2;
if(picCenterL > boxX && picCenterL < (boxX + boxW) && picCenterT > boxY && picCenterT < (boxY + boxH))
*/
//任何一部分判断是否选择
//x轴方向4种情况,y轴方向4种情况
if(((picL > boxX && picR < (boxX + boxW)) || (picL > boxX && picL < (boxX + boxW)) ||
(picR > boxX && picR < (boxX + boxW)) || (picL < boxX && picR > (boxX + boxW))) &&
((picT > boxY && picT < boxY + boxH) || (picT < boxY && picB > (boxY + boxH)) ||
(picB > boxY && picB < (boxY + boxH)) || (picT > boxY && picB < (boxY + boxH)))){
if($('.picitem').eq(i).parent('.queue-item').hasClass('queue-item-selected')){
$('.picitem').eq(i).parent('.queue-item').removeClass('queue-item-selected');
}else{
$('.picitem').eq(i).parent('.queue-item').addClass('queue-item-selected');
}
}
}
}
_bool = false;
_hasMove = false;
$box.hide();
}
})
})
</script>
</body>
</html>