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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
给排水专业应届生求职信
2013/10/12 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
行政人事岗位职责
2014/03/17 职场文书
班级年度安全计划书
2014/05/01 职场文书
机械机修工岗位职责
2014/08/03 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
导游词之山东八大关
2019/12/18 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript