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

更新时间：2017年03月08日 10:20:01 作者：小结巴巴吧

这篇文章主要介绍了js/jq仿window文件夹框选操作插件,非常不错，具有参考借鉴价值，需要的朋友可以参考下

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文件夹框选操作插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

js
window

微信小程序新手教程之启动页的重要性
这篇文章主要给大家介绍了关于微信小程序新手教程之启动页重要性的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03
js function定义函数使用心得
js function定义函数使用心得，了解这个才能更进一步的了解js面向对象方面的知识。
2010-04-04
详解JS去重及字符串奇数位小写转大写
本篇文章主要介绍了详解JS去重及字符串奇数位小写转大写，非常具有实用价值，需要的朋友可以参考下。
2016-12-12
JS获取动态添加元素的方法详解
这篇文章主要介绍了JS获取动态添加元素的方法,结合实例形式分析了js动态添加DOM元素及获取已添加的DOM元素相关操作技巧,需要的朋友可以参考下
2019-07-07
关于ECharts设置x轴刻度间隔的两种方式
这篇文章主要介绍了关于ECharts设置x轴刻度间隔的两种方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
用原生 JS 实现 innerHTML 功能实例详解
这篇文章主要介绍了用原生 JS 实现 innerHTML 功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
全面理解JavaScript中的继承(必看)
下面小编就为大家带来一篇全面理解JavaScript中的继承(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
基于JS实现漫画中大雨滂沱的效果
这篇文章主要为大家详细介绍了如何利用JavaScript实现漫画中大雨滂沱的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
ionic 上拉菜单(ActionSheet)实例代码
ionic js 上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项；点击取消按钮或者点击空白的地方来让它消失。本文给大家分享实现代码，感兴趣的朋友一起看看吧
2016-06-06
获取焦点时,利用js定时器设定时间执行动作
网上有很多类似的知识，并不是有什么难度的技巧，仅仅是开发过程中的一点点积累而已。
2010-04-04