js/jq仿window文件夹框选操作插件

0.先给大家看看效果:

创新互联主要从事成都做网站、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务双湖,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

js/jq仿window文件夹框选操作插件

1.创建一个index.html文件




  
  Title
  
  


   

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=$('
'); $('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().leftstartTop && (e.pageY-startTop>0 && e.pageX-startLeft>0)) || (endLeft<$(this).offset().left+$(this).width() && $(this).offset().leftendTop && (e.pageY-startTop<0 && e.pageX-startLeft<0)) || (endLeft<$(this).offset().left+$(this).width() && $(this).offset().leftstartTop && (e.pageY-startTop>0 && e.pageX-startLeft<0)) || (startLeft<$(this).offset().left+$(this).width() && $(this).offset().leftendTop && (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最下面添加下面代码:

打开index.html查看效果吧!!!!

以上所述是小编给大家介绍的js/jq仿window文件夹框选操作插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


文章名称:js/jq仿window文件夹框选操作插件
本文网址:http://azwzsj.com/article/ppddip.html