欢迎来到福编程网,本站提供各种互联网专业知识!

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

发布时间:2016-06-20 作者:cherry 来源:转载
这篇文章主要介绍了jQuery实现右下角可缩放大小的层,以完整实例形式分析了jQuery页面元素及相关样式属性操作技巧,需要的朋友可以参考下

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



  
    
    大小可缩放层测试
    
    
    
  
  
    

函数封装后:

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 && posxot && posy=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相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

相关推荐