html选择文件夹插件,js/jq仿window文件夹框选操作插件
0.先给大家看看效果:
1.创建一个index.html文件
Title
ul{list-style: none}
li{width:200px;margin:10px;float:left;height: 100px;background: #ccc;border: 1px solid #fff;}
.selected{border: 1px solid red}
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=$('
$('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((startLeftstartTop && (e.pageY-startTop>0 && e.pageX-startLeft>0)) ||
(endLeftendTop && (e.pageY-startTop<0 && e.pageX-startLeft<0)) ||
(endLeftstartTop && (e.pageY-startTop>0 && e.pageX-startLeft<0)) ||
(startLeftendTop && (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最下面添加下面代码:
$(function () {
$('.test').areaSelect()
})
打开index.html查看效果吧!!!!
以上所述是小编给大家介绍的js/jq仿window文件夹框选操作插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
html选择文件夹插件,js/jq仿window文件夹框选操作插件相关推荐
- 【原生JS】仿新浪微博名片弹框
[原生JS]仿新浪微博名片弹框 博客已经搬家地址:http://cm2009.sinaapp.com/ 第一次用原生JS写小功能,有很多不足的地方,例如事件绑定没有使用事件委托功能,而是直接用零级D ...
- html得到上传文件类型后缀,js获取上传文件后缀名(附js提交form表单)
js获取上传文件后缀名(附js提交form表单) 代码如下: function check_file() { var strFileName=form1.FileName.value; if (str ...
- input file 文件上传,js控制上传文件的大小和格式
文件上传一般是用jquery的uploadify,比较好用.后面会出文章介绍uploadify这个插件. 但是,有时候为了偷懒,直接就用input 的file进行文件和图片等的上传,input fil ...
- html复选框美化插件,js和css3超酷checkbox复选框美化插件
这是一款效果超超酷的js和css3 checkbox复选框美化插件.这个checkbox复选框美化插件最大的特点是可以拖动进行复选框的多选,当你选择一个复选框后,按住它往下拖动,下面的复选框也会被选择 ...
- index.html文件作用,MEAN JS – 主要的html文件(index.html)位于何处
MEANJS顶级页面位于server / app / views / layout.server.view.html下,您可以在其中设置标头元标记.页面上的大多数其他内容都是以编程方式插入的,例如指向 ...
- 原生JS写仿淘宝搜索框(代码+效果),可实现3级搜索哦!
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
- c语言源码 文件绑捆,js捆绑TypeScript声明文件的方法教程
前话 TypeScript是JavaScript类型的超集,这是TypeScript的文档介绍的一句话,那么他们存在联系呢? 我的理解是,TypeScript在JavaScript基础上引入强类型语言 ...
- js 访问android 路径,Android与JS进行交互传文件路径
webview+h5这种混合开发最近很火,其中最重要的大概就是java代码和js的交互了,刚接触这东西两天,写写收获. 新建一个assets文件夹,要与res这个文件夹同级,其中存放web项目. 先看 ...
- uin-app全局文件之main.js的详细教学
UniApp 是一款基于 Vue.js 的跨平台开发框架,可以快速构建多端应用程序.在 UniApp 中,我们可以利用全局文件 main.js 实现一些全局配置和初始化操作,以便在整个应用程序中共享和 ...
最新文章
- 干货丨一文看懂生成对抗网络:从架构到训练技巧
- 搭建Hexo部署到github上
- Leetcode每日必刷题库第80题,如何在不使用外部空间的情况下对有序数组去重?
- Boost:双图bimap与散列索引的测试程序
- 操作系统上机题目(多线程2)
- 前端学习(2582):生态圈练习解答
- Netty工作笔记0079---Log4j整合到Netty
- 在MVVM模式下,ListBox的Command绑定
- C#在OpenGL编程中的应用--关于摩尔纹的研究
- iOS 10 的一个重要更新-线程竞态检测工具 Thread Sanitizer
- win10计算机本地组策略编辑器,win10本地组策略编辑器打不开最佳解决方法
- Android自己动手打造XML解析框架
- 基于ECharts数据可视化案例--世界疫情实时展示
- 基于RNN-LSTM模型的诗词生成/TensorFlow
- 15.4 MPLS 控制层面 PE和CE设备间的路由更新
- 编译错误/usr/bin/ld: cannot find -lz
- Java面向对象笔记1|Frame框架和Panel面板
- Python制作二维码简易步骤
- 论文阅读2018:Internet Protocol Cameras with No Password Protection: An Empirical Investigation
- centos7 linux ffmpeg 改变 修改 视频 帧频 shell 懒人系列-17
热门文章
- 下载不了python_Python的下载与安装
- c语言编程宝典pdf,C语言编程宝典之一.pdf
- linux无线网卡消失,linux下wpa/wpa2的无线网卡设置 [暂时还没有证实是否能用]
- java深拷贝和浅拷贝_Java 深拷贝浅拷贝 与 序列化
- android odex版本调试_Android可执行文件之谜 - DEX与ODEX, OAT与ELF
- 零基础学python裴帅帅_人工智能时代,爬虫如此简单。
- java 监听客户端的退出_Java ServerSocket 手动关闭监听
- 测试软件项目的方法,保证项目测试进度的几个方法
- python守护线程错误 退出子线程_请问用python里threading和queue模块来写多线程程序,子线程是如何结束的?...
- CCPC-Wannafly Winter Camp Day8 (Div2, onsite) 补题