js/jq仿window文件夾框選操作插件
更新時(shí)間：2017年03月08日 10:20:01 作者：小結(jié)巴巴吧
這篇文章主要介紹了js/jq仿window文件夾框選操作插件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
0.先給大家看看效果：
1.創(chuàng)建一個(gè)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(); 執(zhí)行毀掉函數(shù)或者，鉤子函數(shù)
$('#select-box').remove();
$(document).unbind('mousemove');
})
})
}
})(jQuery)
3.調(diào)用插件
在index.html的body最下面添加下面代碼：
<script>
$(function () {
$('.test').areaSelect()
})
</script>
打開index.html查看效果吧?。。?！
以上所述是小編給大家介紹的js/jq仿window文件夾框選操作插件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源，這篇文章主要介紹了JavaScript中Webpack的使用,需要的朋友可以參考下2021-10-10
懸浮效果想必大家都不陌生吧，本文為大家介紹下使用js固定懸浮的實(shí)現(xiàn)思路及代碼，感興趣的朋友可以參考下2013-08-08
javascript實(shí)現(xiàn)的簡單計(jì)時(shí)器
計(jì)時(shí)器提供了一 個(gè)可以將代碼片段異步延時(shí)執(zhí)行的能力，javascript生來是單線程的（在一定時(shí)間范圍內(nèi)僅一部分js代碼能運(yùn)行），計(jì)時(shí)器為我們提供了一種避開這種 限制的方法，從而開辟了另一條執(zhí)行代碼的蹊徑。2015-07-07
全選與全不選在管理界面還是比較實(shí)用的，下面通過checkAll與clearAll兩個(gè)函數(shù)來輕松實(shí)現(xiàn)，感興趣的朋友不要錯(cuò)過2013-12-12
這篇文章主要介紹了探討跨域請求資源的幾種方式（總結(jié)），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
JavaScript實(shí)現(xiàn)手寫promise的示例代碼
promise?作為前端開發(fā)中常用的函數(shù)，解決了?js?處理異步時(shí)回調(diào)地獄的問題，大家應(yīng)該也不陌生了，今天來學(xué)習(xí)一下?promise?的實(shí)現(xiàn)過程吧2023-04-04
下面小編就為大家?guī)硪黄猨s的OOP繼承實(shí)現(xiàn)(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了JS數(shù)組方法reduce的用法,結(jié)合實(shí)例形式詳細(xì)分析了JS數(shù)組方法reduce的基本功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細(xì)介紹了通過filereader接口讀取文件，使用readAsDataURL方法預(yù)覽圖片的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
微信小程序動(dòng)畫（Animation）的實(shí)現(xiàn)及執(zhí)行步驟
這篇文章主要介紹了微信小程序動(dòng)畫（Animation） 的實(shí)現(xiàn)及執(zhí)行步驟,需要的朋友可以參考下2018-10-10