jQuery实现右下角可缩放大小的层完整实例


Posted in Javascript onJune 20, 2016

本文实例讲述了jQuery实现右下角可缩放大小的层。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>大小可缩放层测试</title>
    <script type = "text/javascript" src="jquery-1.7.2.js"></script>
    <style type = "text/css">
      #fa{
        border:1px solid blue;
        overflow:auto;
        width:400px;
        height:400px;
      }
      #main{
        margin:0;
        padding:0;
        width:300px;
        height:280px;
        border:1px solid red;
      }
    </style>
    <script type = "text/javascript">
      $(function(){
        var div = getObj("main");
        div.onmousemove = function(e){
          var e = e || window.event;
          var posx = e.clientX;
          var posy = e.clientY;
          var l = div.offsetLeft;
          var t = div.offsetTop;
          var h = div.clientHeight;
          var w = div.clientWidth;
          var ol = l+w-10;
          var or = l+w+10;
          var ot = t+h-10;
          var ob = t+h+10;
          this.style.cursor = "";
          if(posx>ol && posx<or && posy >ot && posy<ob){
            div.style.cursor = "nw-resize";
          }
        }
        div.onmousedown = function(e){
          var e = e || window.event;
          var initX = e.clientX;
          var initY = e.clientY;
          var l = div.offsetLeft;
          var t = div.offsetTop;
          var h = div.clientHeight;
          var w = div.clientWidth;
          var ol = l+w-10;
          var or = l+w+10;
          var ot = t+h-10;
          var ob = t+h+10;
          if(initX>ol && initX<or && initY >ot && initY<ob){
            document.onmousemove = function(evt){
              var e = evt || window.event;
              var currX = e.clientX;
              var currY = e.clientY;
              div.style.width = w + (currX - initX)+"px";
              div.style.height = h+(currY-initY)+"px";
            }
            document.onmouseup = function(){
              document.onmousemove = null;
              document.onmouseup = null;
            }
          }
        }
      });
      function getObj(id){
        return document.getElementById(id);
      }
    </script>
  </head>
  <body>
    <div id = "fa">
      <div id = "main"></div>
    </div>
  </body>
</html>

函数封装后:

function resize(div){
  div.mousemove(function(e){
    var e = e || window.event;
    var posx = e.clientX;
    var posy = e.clientY;
    var l = div.offset().left;
    var t = div.offset().top;
    var h = div.height();
    var w = div.width();
    var ol = l+w-10;
    var or = l+w+10;
    var ot = t+h-10;
    var ob = t+h+10;
    $(this).css("cursor","");
    if(posx>ol && posx<or && posy >ot && posy<ob){
      $(this).css("cursor","nw-resize");
    }
  });
  div.mousedown(function(e){
    var e = e || window.event;
    var posx = e.clientX;
    var posy = e.clientY;
    var l = div.offset().left;
    var t = div.offset().top;
    var h = div.height();
    var w = div.width();
    var ol = l+w-10;
    var or = l+w+10;
    var ot = t+h-10;
    var ob = t+h+10;
    if(posx>=ol && posx<=or && posy >=ot && posy<=ob){
      document.onmousemove = function(e){
        var e = e || window.event;
        var currX = e.clientX;
        var currY = e.clientY;
        div.width(w + (currX - posx));
        div.height(h+(currY-posy));
      }
      $(document).mouseup(function(){
        document.onmousemove = null;
      });
    }
  });
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 剧场版 你必须知道的javascript
May 27 Javascript
JavaScript delete 属性的使用
Oct 08 Javascript
JQuery select标签操作代码段
May 16 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
js仿淘宝放大镜效果
Dec 28 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 #Javascript
Javascript中的arguments对象
Jun 20 #Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 #Javascript
BootStrap selectpicker
Jun 20 #Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 #Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 #Javascript
js 获取经纬度的实现方法
Jun 20 #Javascript
You might like
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
php 常用类汇总 推荐收藏
2010/05/13 PHP
php笔记之常用文件操作
2010/10/12 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
如何为vue的项目添加单元测试
2018/12/19 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
python实现将元祖转换成数组的方法
2015/05/04 Python
python多线程之事件Event的使用详解
2018/04/27 Python
python实现随机漫步方法和原理
2019/06/10 Python
python中metaclass原理与用法详解
2019/06/25 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
金融行业务员的自我评价
2013/12/13 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
护理专业自荐信范文
2015/03/06 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL