网站推荐、资源下载等 | 个人网站

鼠标拖拉div宽度

先看效果

先进入页面

当鼠标停留在中间div时,鼠标变成双箭头

点击拖拉

往右边拉

往最左边拉

 

代码

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5     <!--<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>-->
  6     <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  7     <title>
  8         RunJS 演示代码
  9     </title>
 10     <style>
 11         /*设置所有的厚度和元素间为0*/
 12         * {
 13             margin: 0;
 14             padding: 0;
 15         }
 16 
 17         /*设置页面背景颜色*/
 18         body {
 19             background-color: #af4040;
 20         }
 21 
 22         /*设置所有div绝对定位且左浮动,高度为500px*/
 23         div {
 24             position: absolute;
 25             float: left;
 26             height: 500px;
 27         }
 28 
 29         /*设置左边div背景颜色、宽度为200px、左边距离窗口为0*/
 30         div.left {
 31             background-color: #B2B2B2;
 32             width: 200px;
 33             left: 0px;
 34         }
 35 
 36         /*设置右边div背景颜色、宽度200px、右边距离窗口为205px、右浮动*/
 37         div.right {
 38             background-color: #00B83F;
 39             width: 200px;
 40             right: 205px;
 41             float: right;
 42         }
 43 
 44         /*设置中间div宽度5px、鼠标为左右两个箭头、背景颜色、元素的堆叠顺序为[后来者居上的准则]、左边距离窗口200px*/
 45         div.center {
 46             width: 5px;
 47             cursor: col-resize;
 48             background-color: #FFB951;
 49             z-index: 1;
 50             left: 200px;
 51         }
 52     </style>
 53     <script>
 54         $(function () {
 55             // 分别是:当前窗口、左边div、中间div、右边div
 56             var doc = $(document), dl = $("div.left"), dc = $("div.center"), dr = $("div.right");
 57             // 三个div宽度的总和
 58             var sum = dl.width() + dr.width() + dc.width();
 59             // 中间div拖动鼠标事件
 60             dc.mousedown(function (e) {
 61                 // 把当前中间div的dom对象转为jquery对象
 62                 // var me = $(this);
 63                 // e.clientX当前鼠标的x轴长度,me.css("left")中间div距离左边长度,me.prop("clientLeft")中间div距离左边div长度
 64                 var deltaX = e.clientX - (parseFloat(dc.css("left")) || parseFloat(dc.prop("border-left")));
 65                 // deltaX表示记录鼠标点击时,距离中间div左边的距离,取值范围不会超过中间div的宽度
 66                 // 鼠标移动事件
 67                 doc.mousemove(function (e) {
 68                     // lt表示鼠标移动时,中间div左边距离左边窗口的长度
 69                     var lt = e.clientX - deltaX;
 70                     // 这里表示,当中间div左边距离左边窗口的长度小于等于0时就等于0,就是保证不小于0
 71                     lt = lt < 0 ? 0 : lt;
 72                     // 这里表示,当中间div左边距离左边窗口的长度大于左边div加中间div长度时就等于左边div加中间div长度,就是保证不大于左边div加中间div的长度
 73                     lt = lt > sum - dc.width() ? sum - dc.width() : lt;
 74                     // 设置中间div左边的宽度,也就是等于当前鼠标的x轴
 75                     dc.css("left", lt + "px");
 76                     // 设置左边div的宽度
 77                     dl.width(lt);
 78                     // 设置右边div的宽度
 79                     dr.width(sum - lt - dc.width());
 80                 });
 81             });
 82 
 83             // 鼠标松开后删除鼠标移动事件
 84             doc.mouseup(function () {
 85                 doc.unbind("mousemove");
 86             });
 87 
 88             // 当鼠标点击移动开始不选中div里的内容
 89             doc[0].onselectstart = function () {
 90                 return false;
 91             };
 92         });
 93     </script>
 94 </head>
 95 <body>
 96 <div class="left">
 97     这是左边的div
 98 </div>
 99 <div class="center">
100     这是中间的div
101 </div>
102 <div class="right">
103     这是右边的div
104 </div>
105 </body>
106 </html>

 

posted @ 2019-05-06 22:04  xiaostudy  阅读(884)  评论(0编辑  收藏  举报
网站推荐
[理工最爱]小时百科 |  GitHub |  Gitee |  开源中国社区 |  牛客网 |  不学网论坛 |  r2coding |  冷熊简历 |  爱盘 |  零散坑 |  bootstrap中文网 |  vue.js官网教程 |  源码分享站 |  maven仓库 |  楼教主网站 |  廖雪峰网站 |  w3cschool |  在线API |  代码在线运行 |  [不学网]代码在线运行 |  JS在线运行 |  PHP中文网 |  深度开源eclipse插件 |  文字在线加密解密 |  菜鸟教程 |  慕课网 |  千图网 |  手册网 |  素材兔 |  盘多多 |  悦书PDF |  sumatra PDF |  calibre PDF |  Snipaste截图 |  shareX截图 |  vlc-media-player播放器 |  MCMusic player |  IDM下载器 |  格式工厂 |  插件网 |  谷歌浏览器插件 |  Crx搜搜 |  懒人在线计算器 |  leetcode算法题库 |  layer官网 |  layui官网 |  formSelects官网 |  Fly社区 |  程序员客栈 |  融云 |  华为云 |  阿里云 |  ztree官网API |  teamviewer官网 |  sonarlint官网 |  editormd |  pcmark10官网 |  crx4chrome官网 |  apipost官网 |  花生壳官网 |  serv-u官网 |  杀毒eset官网 |  分流抢票bypass官网 |  懒猴子CG代码生成器官网 |  IT猿网 |  natapp[内网穿透] |  ngrok[内网穿透] |  深蓝穿透[内网穿透] |  WakeMeOnLan[查看ip] |  iis7 |  [漏洞扫描]Dependency_Check官网 |  [图标UI]fontawesome官网 |  idea插件官网 |  路过图床官网 |  sha256在线解密 |  在线正则表达式测试 |  在线文件扫毒 |  KuangStudy | 
资源下载
电脑相关: Windows原装下载msdn我告诉你 |  U盘制作微PE工具官网下载 |  Linux_CentOS官网下载 |  Linux_Ubuntu官网下载 |  Linux_OpenSUSE官网下载 |  IE浏览器官网下载 |  firefox浏览器官网下载 |  百分浏览器官网下载 |  谷歌google浏览器历史版本下载 |  深度deepin系统官网下载 |  中兴新支点操作系统官网下载 |  文件对比工具Beyond Compare官网下载 |  开机启动程序startup-delayer官网下载 |  openoffice官网下载 |  utorrent官网下载 |  qbittorrent官网下载 |  cpu-z官网下载 |  蜘蛛校色仪displaycal官网下载 |  单文件制作greenone下载 |  win清理工具Advanced SystemCare官网下载 |  解压bandizip官网下载 |  内存检测工具memtest官网下载 |  磁盘坏道检测与修复DiskGenius官网下载 |  磁盘占用可视化SpaceSniffer官网下载 |  [磁盘可视化]WizTree官网下载 |  win快速定位文件Everything官网下载 |  文件定位listary官网下载 |  动图gifcam官网下载 |  7-Zip官网下载 |  磁盘分区工具diskgenius官网下载 |  CEB文件查看工具Apabi Reader官网下载 |  罗技鼠标options官网下载 |  [去除重复文件]doublekiller官网下载 | 
编程相关: ApacheServer官网下载 |  Apache官网下载 |  Git官网下载 |  Git高速下载 |  Jboss官网下载 |  Mysql官网下载 |  Mysql官网历史版本下载 |  NetBeans IDE官网下载 |  Spring官网下载 |  Nginx官网下载 |  Resin官网下载 |  Tomcat官网下载 |  jQuery历史版本下载 |  nosql官网下载 |  mongodb官网下载 |  mongodb_linux历史版本下载 |  mongodb客户端下载 |  VScode官网下载 |  cxf官网下载 |  maven官网下载 |  QT官网下载 |  SVN官网下载 |  SVN历史版本下载 |  nodeJS官网下载 |  oracle官网下载 |  jdk官网下载 |  STS官网下载 |  STS历史版本官网下载 |  vue官网下载 |  virtualbox官网下载 |  docker desktop官网下载 |  github desktop官网下载 |  EditPlus官网下载 |  zTree下载 |  layui官网下载 |  jqgrid官网下载 |  jqueryui官网下载 |  solr历史版本下载 |  solr分词器ik-analyzer-solr历史版本下载 |  zookeeper历史版本官网下载 |  nssm官网下载 |  elasticsearch官网下载 |  elasticsearch历史版本官网下载 |  redis官网下载 |  redis历史版本官网下载 |  redis的win版本下载 |  putty官网下载 |  查看svn密码TSvnPD官网下载 |  MongoDB连接工具Robo官网下载 |  dll查看exescope官网下载 |  dll2c官网下载 |  接口测试apipost官网下载 |  接口测试postman官网下载 |  原型设计工具AxureRP官网下载 |  canal官网下载 |  idea主题样式下载 |  vue的GitHub下载 |  finalShell官网下载 |  ETL工具kafka官网下载 |  cavaj[java反编译]官网下载 |  jd-gui[java反编译]官网下载 |  radmin[远程连接]官网下载 |  tcping[win ping端口]下载 |  jQueryUploadFile官网下载 |  RedisPlus下载 |  aiXcoder智能编程助手官网下载 |  [表单效验]validform官网下载 |  idea官网下载 |  RedisStudio下载 |  MD转word含公式pandoc官网下载 |  logviewer官网下载 |  Kafka官网下载 |  hbase高速下载 |  hadoop官网下载 |  hadooponwindows的GitHub下载 |  hive官网下载 |  soapui官网下载 |  flink官网下载 |  kafkatool官网下载 |  MinIO官网下载 |  MinIO中国镜像下载 | 
办公相关工具
免费在线拆分PDF【不超过30M】 |  免费在线PDF转Word【不超过10M】 |  在线文字识别转换【不超过1M】 |  PDF转换成Word【不超过50M】 |  在线OCR识别 |  Smallpdf |  文件转换器Convertio |  迅捷PDF转换器 |  字母大小写转换工具 |  档铺 |  快传airportal[可文字] |  快传-文叔叔 |  P2P-小鹿快传 |  [图床]ImgURL | 
网站入口
腾讯文档 |  有道云笔记网页版 |  为知笔记网页版 |  印象笔记网页版 |  蓝奏云 |  QQ邮箱 |  MindMaster在线思维导图 |  bilibili |  PDM文件在线打开 |  MPP文件在线打开 |  在线PS软件 |  在线WPS |  阿里云企业邮箱登陆入口 | 
其他
PDF转换 |  悦书PDF转换 |  手机号注册查询 |  Reg007 |  akmsg |  ip8_ip查询 |  ipip_ip查询 |  天体运行testtubegames |  测试帧率 |  在线网速测试 |