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>
相关推荐
综上所述，"jquery元素跟随鼠标移动"这一特效涉及到jQuery的选择器用于选取元素，事件处理机制用于监听鼠标移动，以及CSS定位技术用于动态调整元素位置。通过理解和掌握这些知识点，不仅可以创建有趣的交互效果，也...
在进行自动化测试时，模拟鼠标移动和点击常常与其他工具一起使用，例如Selenium（Web自动化测试）、Appium（移动应用自动化测试）等，它们可以配合完成网页元素的选择、表单填写、按钮点击等任务。 压缩包中的"模拟...
当鼠标移动到某个元素上时，通过JavaScript的mouseover或mouseenter事件触发内容的切换；而离开时，利用mouseout或mouseleave事件恢复原状。对于更复杂的动画效果，CSS3的transition和animation属性可以实现平滑的...
javascript 点击页面元素节点移动
在自动化测试中，模拟鼠标移动轨迹常用于验证用户界面元素的功能。例如，它可以模拟用户点击按钮、拖动滑块或选择下拉菜单项等。在游戏自动化方面，模拟鼠标移动可以帮助玩家执行复杂的操作，如精确射击或快速反应。...
鼠标移动样式是指在网页或应用程序中，鼠标指针根据用户操作或页面元素的不同而变化的样式。通过改变鼠标的外观，可以提升用户体验，使界面更加生动有趣。例如，在链接上移动时，鼠标可能会变为手形；在文本编辑区域...
在IT领域，模拟鼠标移动是一项重要的技术，尤其在自动化测试、游戏编程以及各种软件应用中。这个"完整版模拟鼠标移动.rar"文件可能包含了一系列工具、库或代码示例，用于在计算机上模拟鼠标的动作，如点击、移动、...
这种效果使得网页元素在跟随鼠标移动时，其运动速度与鼠标移动速度不同，从而产生一种深度和立体感，提升了用户的交互体验。 在jQuery中，这种效果通常通过编写或使用现成的插件实现。"鼠标移动视觉差"插件能够改变...
标题"QwtPlot 鼠标移动点"涉及的核心概念是QwtPlot的交互性，特别是利用鼠标事件来操纵图形元素。QwtPlot是Qwt库中的一个关键类，它代表了一个二维绘图区域，可以用于显示各种图表，如线图、散点图等。通过监听鼠标...
在这里，我们将主要使用`TranslateTransform`来改变元素的X和Y坐标，实现跟随鼠标移动的效果。 3. **事件监听**：首先，我们需要监听鼠标的`MouseMove`事件，这个事件会在鼠标在界面上移动时触发。在事件处理程序中...
2. `mousemove`：在鼠标移动时持续触发，用于跟踪鼠标的位置。 3. `mouseup`：当用户释放鼠标按钮时触发，标志着拖动操作的结束。 为了实现拖拽功能，我们通常会为目标元素添加这些事件监听器，并在事件处理函数中...
在LabVIEW编程环境中，光标随鼠标移动显示对应位置数据是一项常见的需求，特别是在进行数据分析、信号处理或界面交互设计时。这个"LabVIEW光标随鼠标移动显示对应位置数据.rar"压缩包文件很可能是包含了一个LabVIEW...
在某些高级应用中，我们可能需要与用户的交互，比如控制鼠标移动。这个"OpenCV控制鼠标移动"的项目就展示了如何利用OpenCV来实现这一功能。 OpenCV提供了名为`cv2.setMouseCallback()`的函数，它是事件驱动的，可以...
"鼠标移动粒子光标动画特效"是一种能够显著提升网站互动性和趣味性的技术。这种特效使得鼠标光标在移动时，会跟随一系列粒子或者图形，形成一个动态的“小尾巴”，增加了用户的沉浸感。 首先，我们要理解这种特效的...
《displaceable：轻量级高性能的JavaScript库——实现鼠标移动元素平滑移动的魔法》 在现代网页设计中，动态交互元素已经成为提升用户体验的重要手段。"displaceable"作为一个小巧而高性能的JavaScript库，正是为此...
"jquery元素跟随鼠标移动"是一个常见的交互效果，常用于创建动态UI或者游戏中的对象追踪。在这个主题中，我们将深入探讨如何利用jQuery实现这一功能，以及涉及的相关CSS和HTML5知识点。 首先，我们需要理解HTML5的...
当鼠标移动到某个组件上时，会触发相应的事件，我们可以在这个事件中进行处理。 首先，我们要了解易语言中的组件（控件）和事件。组件是用户界面的基本元素，如窗口、按钮、文本框等。事件是组件上的特定行为，例如...
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现窗体的拖拽效果，让窗体能够跟随鼠标移动。WPF是.NET框架的一部分，为开发丰富的桌面应用程序提供了强大的工具集。C#是常用的编程语言...
【随鼠标移动而变色的背景】小程序是一个基于WPF（Windows Presentation Foundation）技术的简单应用，它展示了如何响应鼠标的移动并动态改变窗口的背景颜色。程序的核心是利用鼠标移动事件（OnMouseMove）来计算...
例如，如果你想让一个图形元素跟随鼠标移动，可以创建一个`Sprite`，设置其初始位置，并在`handleMouseMove`函数中更新它的位置： ```actionscript private var mySprite:Sprite = new Sprite(); mySprite.x = 50; ...