js/jq仿window文件夹框选操作插件
程序员文章站
2023-11-26 14:07:34
0.先给大家看看效果：
1.创建一个index.html文件
...
0.先给大家看看效果：
1.创建一个index.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
ul{list-style: none}
li{width:200px;margin:10px;float:left;height: 100px;background: #ccc;border: 1px solid #fff;}
.selected{border: 1px solid red}
</style>
<script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<ul class='clearfix test' >
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<div style="clear: both"></div>
</ul>
</body>
</html>
2.引入插件areaselect.js
(function($){
$.fn.areaselect=function(option){
var opt={}
opt=$.extend(opt,option);
var _this=$(this);
_this.on('mousedown',function (e) {
console.log(_this)
_this.find('li').removeclass('selected');
var starttop=e.pagey;
var startleft=e.pagex;
var endtop,endleft;
var selectbox=$('<div id="select-box"></div>');
$('body').append(selectbox);
selectbox.css({'position':'absolute', 'top':starttop+'px', 'left':startleft+'px', 'background':'rgba(255,106,23,0.3)', 'transition':'all 0s', 'width':0, 'height':0, 'z-index':10})
$(document).on('mousemove',function (e) {
e.preventdefault();
endtop=e.pagey;
endleft=e.pagex;
if(e.pagey-starttop>0 && e.pagex-startleft>0){
var height=e.pagey-starttop;
var width=e.pagex-startleft;
selectbox.css({
'width':width+'px',
'height':height+'px'
})
}else if(e.pagey-starttop<0 && e.pagex-startleft<0) {
var height=-(e.pagey-starttop);
var width=-(e.pagex-startleft);
selectbox.css({
'width':width+'px',
'height':height+'px',
'top':e.pagey+'px',
'left':e.pagex+'px'
})
}else if(e.pagey-starttop>0 && e.pagex-startleft<0) {
var height=(e.pagey-starttop);
var width=-(e.pagex-startleft);
selectbox.css({
'width':width+'px',
'height':height+'px',
'top':starttop+'px',
'left':e.pagex+'px'
})
}else if(e.pagey-starttop<0 && e.pagex-startleft>0) {
var height=-(e.pagey-starttop);
var width=(e.pagex-startleft);
selectbox.css({
'width':width+'px',
'height':height+'px',
'top':e.pagey+'px',
'left':startleft+'px'
})
}
_this.find('>li').each(function () {
if((startleft<$(this).offset().left+$(this).width() && $(this).offset().left<endleft && $(this).offset().top<endtop && $(this).offset().top+$(this).height()>starttop && (e.pagey-starttop>0 && e.pagex-startleft>0)) ||
(endleft<$(this).offset().left+$(this).width() && $(this).offset().left<startleft && $(this).offset().top<starttop && $(this).offset().top+$(this).height()>endtop && (e.pagey-starttop<0 && e.pagex-startleft<0)) ||
(endleft<$(this).offset().left+$(this).width() && $(this).offset().left<startleft && $(this).offset().top<endtop && $(this).offset().top+$(this).height()>starttop && (e.pagey-starttop>0 && e.pagex-startleft<0)) ||
(startleft<$(this).offset().left+$(this).width() && $(this).offset().left<endleft && $(this).offset().top<starttop && $(this).offset().top+$(this).height()>endtop && (e.pagey-starttop<0 && e.pagex-startleft>0)) ){
$(this).addclass('selected');
return;
}else {
$(this).removeclass('selected');
}
})
})
$(document).on('mouseup',function () {
// if(opt.do) opt.do(); 执行毁掉函数或者，钩子函数
$('#select-box').remove();
$(document).unbind('mousemove');
})
})
}
})(jquery)
3.调用插件
在index.html的body最下面添加下面代码：
<script>
$(function () {
$('.test').areaselect()
})
</script>
打开index.html查看效果吧！！！！
以上所述是小编给大家介绍的js/jq仿window文件夹框选操作插件，希望对大家有所帮助