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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
AngularJs表单验证实例详解
May 30 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
vue使用nprogress实现进度条
Dec 09 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
第八节 访问方式 [8]
2006/10/09 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
javascript常用函数(2)
2015/11/05 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
python使用itchat实现手机控制电脑
2018/02/22 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
澳大利亚相机之家:Camera House
2017/11/30 全球购物
销售员试用期自我评价
2014/09/15 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
事业单位年度考核评语
2014/12/31 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS