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 form布局
Oct 08 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 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
ajax php 实现写入数据库
2009/09/02 PHP
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
js快速排序的实现代码
2013/12/08 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
python列表操作实例
2015/01/14 Python
Python实现的科学计算器功能示例
2017/08/04 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Python创建字典的八种方式
2019/02/27 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
教育课题研究自我鉴定范文
2013/12/28 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
逃课检讨书范文
2015/05/06 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
报案材料怎么写
2015/05/25 职场文书