js/jq仿window文件夾框選操作插件
更新時間:2017年03月08日 10:20:01 作者:小結(jié)巴巴吧
這篇文章主要介紹了js/jq仿window文件夾框選操作插件,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
0.先給大家看看效果:
1.創(chuàng)建一個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文件夾框選操作插件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
JavaScript實現(xiàn)手寫promise的示例代碼
promise?作為前端開發(fā)中常用的函數(shù),解決了?js?處理異步時回調(diào)地獄的問題,大家應該也不陌生了,今天來學習一下?promise?的實現(xiàn)過程吧2023-04-04微信小程序動畫(Animation)的實現(xiàn)及執(zhí)行步驟
這篇文章主要介紹了微信小程序動畫(Animation) 的實現(xiàn)及執(zhí)行步驟,需要的朋友可以參考下2018-10-10