jquery外掛程式jquery.dragscale.js實作拖曳改變元素大小的方法(附demo原始碼下載)

jquery外掛程式jquery.dragscale.js實作拖曳改變元素大小的方法(附demo原始碼下載)_jquery

WBOY

發布： 2016-05-16 15:13:38

原創

2188 人瀏覽過

本文實例講述了jquery外掛程式jquery.dragscale.js實作拖曳改變元素大小的方法。分享給大家參考，具體如下：

該插件是文章作者所寫，目的在於提升作者的js能力，也給一些js菜鳥在使用插件時提供一些便利，老鳥就悠然地飛過吧。

此外掛程式旨在實現目前較為流行的拖曳改變元素大小的效果，您可以根據自己的實際需求來設定被拖曳元素的最小寬高和最大寬高。整體程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
.box{position:absolute;left:100px;top:100px;border:1px solid #eee;width:150px;height:150px;padding:10px;cursor:move;}
.drag{position:absolute;bottom:3px;right:3px;display:block;width:7px;height:7px;background:url(scale.png) no-repeat}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.resizable.js"></script>
</head>
<body>
<div class="box">拖拽我吧！<span class="drag"></span></div>
<script>
$(function(){
  $(".drag").resizable({
    minW : 150,
    minH : 150,
    maxW : 500,
    maxH : 500,
    });
  })
</script>
</body>
</html>

登入後複製

外掛程式 jquery.dragscale.js 程式碼：

/*
*resizable 0.1
*Dependenc jquery-1.7.1.js
*/
;(function(a){
  a.fn.resizable = function(options){
    var defaults = { //默认参数
      minW : 150,
      minH : 150,
      maxW : 500,
      maxH : 500,
      }
    var opts = a.extend(defaults, options);
    this.each(function(){
      var obj = a(this);
      obj.mousedown(function(e){
        var e = e || event; //区分IE和其他浏览器事件对象
        var x = e.pageX - obj.position().left; //获取鼠标距离匹配元素的父元素左侧的距离
        var y = e.pageY - obj.position().top; //获取鼠标距离匹配元素的父元素顶端的距离
        $(document).mousemove(function(e){
          var e = e || event;
          var _x = e.pageX - x; //动态获取匹配元素距离其父元素左侧的宽度
          var _y = e.pageY - y;
          _x = _x < opts.minW &#63; opts.minW : _x; //保证匹配元素的最小宽度为150px
          _x = _x > opts.maxW &#63; opts.maxW : _x; //保证匹配元素的最大宽度为500px
          _y = _y < opts.minH &#63; opts.minH : _y;
          _y = _y > opts.maxH &#63; opts.maxH : _y;
          obj.parent().css({width:_x,height:_y});
        }).mouseup(function(){
          $(this).unbind("mousemove"); //当鼠标抬起 删除移动事件  匹配元素宽高变化停止
          });
        });
      })
    }
})(jQuery);

登入後複製

完整實例程式碼點擊此處本站下載。

更多關於jQuery相關內容有興趣的讀者可查看本站專題：《jQuery拖曳特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效總結》、《jQuery動畫與特效用法總整理》、《jquery選擇器用法摘要》及《jQueryery與常用外掛程式使用總結》

希望本文所述對大家jQuery程式設計有所幫助。