jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

 更新时间:2016年02月25日 10:58:42   转载 作者:小坏  
这篇文章主要介绍了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法,涉及jquery针对鼠标事件的响应及页面元素动态操作的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了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 ? opts.minW : _x; //保证匹配元素的最小宽度为150px
          _x = _x > opts.maxW ? opts.maxW : _x; //保证匹配元素的最大宽度为500px
          _y = _y < opts.minH ? opts.minH : _y;
          _y = _y > opts.maxH ? opts.maxH : _y;
          obj.parent().css({width:_x,height:_y});
        }).mouseup(function(){
          $(this).unbind("mousemove"); //当鼠标抬起 删除移动事件  匹配元素宽高变化停止
          });
        });
      })
    }
})(jQuery);

完整实例代码点击此处本站下载

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结

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

相关文章

  • jQuery弹性滑动导航菜单实现思路及代码

    jQuery弹性滑动导航菜单实现思路及代码

    用一个绝对定位的div作为动画滑块,改变它的left属性来呈现动画效果javascript:hover()触发移动鼠标到导航nav的动作,和移出导航nav的动作
    2013-05-05
  • jQuery layui常用方法介绍

    jQuery layui常用方法介绍

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验,接下来通过本文给大家介绍layui常用方法,需要的朋友参考下
    2016-07-07
  • jQuery ajax仿Google自动提示SearchSuggess功能示例

    jQuery ajax仿Google自动提示SearchSuggess功能示例

    这篇文章主要介绍了jQuery ajax仿Google自动提示SearchSuggess功能,结合实例形式较为详细的分析了jQuery结合ajax与.net后台调用sql数据库实现搜索自动提示相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • jquery移除了live()、die(),新版事件绑定on()、off()的方法

    jquery移除了live()、die(),新版事件绑定on()、off()的方法

    下面小编就为大家带来一篇jquery移除了live()、die(),新版事件绑定on()、off()的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jquery中EasyUI实现同步树

    jquery中EasyUI实现同步树

    本文主要是给大家分享了一则使用EasyUI实现同步树的代码,主要是使用递归实现,非常实用的方法,推荐给小伙伴们。
    2015-03-03
  • jQuery图片播放8款精美插件分享

    jQuery图片播放8款精美插件分享

    与大家一起分享8款精美的jQuery图片播放插件,有兴趣的朋友可以下载使用和研究;废话不多说了,直接上这些插件,希望这些插件对你有所帮助
    2013-02-02
  • jquery实现直播视频弹幕效果

    jquery实现直播视频弹幕效果

    在本篇文章里小编给大家整理了关于JQ实现直播视频弹幕效果相关代码,需要的朋友们可以学习参考下。
    2020-02-02
  • jQuery简单实现tab选项卡切换效果

    jQuery简单实现tab选项卡切换效果

    这篇文章主要介绍使用jQuery封装了一个tab选项卡切换的插件,需要的朋友可以参考下。
    2016-06-06
  • jQuery 使用手册(四)

    jQuery 使用手册(四)

    jQuery 使用手册,大家可以耐心的看完,就基本上入门了。
    2009-09-09
  • 基于jquery的动画效果代码

    基于jquery的动画效果代码

    基于jquery的动画效果代码,挺有意思的,需要的朋友可以参考下
    2012-07-07

最新评论