JavaScript
搜索
分类

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

作者：小结巴巴吧 时间：2024-04-16 09:50:23　

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文件夹框选操作插件网站的支持！

来源：http://www.cnblogs.com/jiebba/archive/2017/03/08/6517943.html

标签：js,window
0
投稿

猜你喜欢

  • SQL中WHERE变量IS NULL条件导致全表扫描问题的解决方法

    2024-01-13 12:58:24

  • Python远程控制Windows服务器的方法详解

    2023-07-13 13:14:03

  • Python3.9最新版下载与安装图文教程详解(Windows系统为例)

    2023-12-13 20:26:51

  • Linux+php+apache+oracle环境搭建之CentOS下安装Oracle数据库

    2023-10-08 01:02:56

  • python通过cookie模拟已登录状态的初步研究

    2022-10-25 08:20:46

  • MySQL字符集 GBK、GB2312、UTF8区别 解决MYSQL中文乱码问题

    2024-01-14 03:16:56

  • windows中python实现自动化部署

    2023-06-24 16:04:14

  • 详解使用Vue Router导航钩子与Vuex来实现后退状态保存

    2024-05-05 09:24:27

  • 最新LOGO设计流行趋势——叶子

    2007-10-02 18:26:00

  • 层叠加的五条叠加法则

    2009-05-01 12:07:00

  • 网站设计做好超级链接的重要性

    2007-09-14 11:19:00

  • python实现字符串和数字拼接

    2023-05-29 07:05:29

  • python抓取网站的图片并下载到本地的方法

    2022-05-19 23:45:08

  • Python使用Turtle模块绘制五星红旗代码示例

    2022-03-02 16:17:19

  • numpy 矩阵形状调整:拉伸、变成一位数组的实例

    2021-12-15 06:40:02

  • 解决python打不开文件(文件不存在)的问题

    2021-10-15 02:39:46

  • 让表单 input 只能输入数字

    2008-06-08 13:54:00

  • golang容易导致内存泄漏的6种情况汇总

    2024-04-25 13:20:17

  • LZ77 算法的JS实现

    2010-04-11 22:32:00

  • 导航设计的流行趋势

    2007-12-25 12:06:00
    • asp之家 网络编程 m.aspxhome.com