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之typeof、instanceof操作符使用探讨
May 19 Javascript
js函数排序的实例代码
Jul 01 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
js实现简单五子棋游戏
May 28 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
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
php生成静态页面的简单示例
2014/04/17 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php实现数字补零的方法总结
2018/09/12 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
动态加载iframe
2006/06/16 Javascript
破除一些网站复制、右键限制
2006/11/04 Javascript
JavaScript的面向对象(一)
2006/11/09 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Django URL传递参数的方法总结
2016/08/28 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
python__new__内置静态方法使用解析
2020/01/07 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
HTTP状态码详解
2021/03/18 杂记
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
大学校庆策划书
2014/01/31 职场文书
大学生求职信
2014/06/17 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
离婚财产分割协议书
2015/08/11 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS