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


Posted in Javascript onMarch 08, 2017

0.先给大家看看效果:

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

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

Javascript 相关文章推荐
Javascript面向对象扩展库代码分享
Mar 27 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
js实现上下左右弹框划出效果
Mar 08 #Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 #Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 #Javascript
原生js实现瀑布流布局
Mar 08 #Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 #Javascript
JavaScript中的工厂函数(推荐)
Mar 08 #Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 #Javascript
You might like
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php查询ip所在地的方法
2014/12/05 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
在Python中使用正则表达式的方法
2015/08/13 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
Python实战之制作天气查询软件
2019/05/14 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Python解析多帧dicom数据详解
2020/01/13 Python
python实现程序重启和系统重启方式
2020/04/16 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
婚礼答谢宴主持词
2014/03/14 职场文书
《画家乡》教学反思
2014/04/22 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
2014年检验员工作总结
2014/11/19 职场文书
新郎结婚保证书
2015/02/26 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
《七律·长征》教学反思
2016/02/16 职场文书