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)文章
本文給大家介紹mvc提交表單的四種方法，分別是MVC HtmlHelper方法，傳統(tǒng)Form表單Aciton屬性提交，Jquery+Ajax 提交表單，MVC Controller控制器和表單參數(shù)傳遞，介紹的非常詳細(xì)，需要的朋友參考下2016-08-08
淺談Javascript中的12種DOM節(jié)點(diǎn)類型
DOM是javascript操作網(wǎng)頁的接口，全稱為文檔對象模型(Document Object Model)。本文將主要說明DOM節(jié)點(diǎn)類型，有需要的可以參考借鑒。2016-08-08
JS實(shí)現(xiàn)支持Ajax驗(yàn)證的表單插件
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)支持Ajax驗(yàn)證的表單插件，感興趣的小伙伴們可以參考一下2016-03-03
首先要感謝 EtherDream 的不同觀點(diǎn)，在 巧用cssText屬性批量操作樣式 一篇中由于他的質(zhì)疑態(tài)度使我做了進(jìn)一步的測試。2011-03-03
js監(jiān)聽滾動條滾動事件使得某個(gè)標(biāo)簽內(nèi)容始終位于同一位置
js如何監(jiān)聽滾動條滾動事件，使得某個(gè)標(biāo)簽內(nèi)容始終位于同一位置，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-01-01
javascript實(shí)現(xiàn)的HashMap類代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)的HashMap類代碼,實(shí)現(xiàn)了添加、獲取、刪除、查詢key和value功能,需要的朋友可以參考下2014-06-06
javascript 導(dǎo)出數(shù)據(jù)到Excel(處理table中的元素)
最近做的項(xiàng)目中有個(gè)要求，需要將數(shù)據(jù)導(dǎo)出到Excel中，關(guān)于這個(gè)就不是什么問題，網(wǎng)上的資料很多?？僧?dāng)Table中有Input(text)之類的元素是怎么辦？2009-12-12
如何解決java.lang.NumberFormatException: null異常
這篇文章主要介紹了如何解決java.lang.NumberFormatException: null異常問題，具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
javaScript代碼飄紅報(bào)錯(cuò)看不懂？讀完這篇文章再試試
這篇文章主要介紹了javaScript代碼飄紅報(bào)錯(cuò)看不懂？讀完這篇文章再試試,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了JavaScript三種獲取URL參數(shù)值的方法，文章圍繞主題展開詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09