jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)


Posted in Javascript onMay 27, 2016

本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法。分享给大家供大家参考,具体如下:

综合网上一些代码 自己写的一个图片缩放拖拽的小插件

/**
 *
 * <a href="http://lib.csdn.net/base/22" class='replace_word' title="jQuery知识库" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery</a> imageQ plugin
 * @name jquery-imageQ.js
 * @author Q
 * @date 2011-01-19
 * maxRatio 最大放大比例
 * minRatio 最小缩小比例
 * changeRadio 每次变化幅度
 * picUrl:图片地址,
 * picWidth:图片宽度,
 * picHeight:图片高度,
 * reset:是否重设图片
 *
 */
(function($){
  var status = false;
  $.fn.imageQ = function(options){
    var defaults = {
      maxRatio:4,
      minRatio:4,
      changeRadio:0.2,
      picUrl:'',
      picWidth:306,
      picHeight:372,
      reset:false
    }
    var options=jQuery.extend(defaults,options);
    return this.each(function(){
      status = true;
      $(this).attr('src','');
      $(this).attr('src',options.picUrl);
      var naturalwidth = options.picWidth;
      var naturalheight = options.picHeight;
      var minwidth = Math.round(naturalwidth/options.minRatio);
      var minheight = Math.round(naturalheight/options.minRatio);
      var maxwidth = Math.round(naturalwidth*options.maxRatio);
      var maxheight = Math.round(naturalheight*options.maxRatio);
      if(options.reset)
      {
        $("#wrapDiv").css("width",naturalwidth+"px");
        $("#wrapDiv").css("height",naturalheight+"px");
        $("#wrapDiv").css("top",'0px');
        $("#wrapDiv").css("left",'0px');
      }
      else
      {
        $(this).css("width","100%");
        $(this).css("height","100%");
        $(this).wrap("<div id='wrapDiv' style='-moz-user-select: none;width:"+naturalwidth+"px;height:"+naturalheight+"px;cursor:move;position:relative;top:0px;left:0px;visibility: visible;' ondragstart='return false;' onselectstart='return false;'></div>");
        $("#wrapDiv").before('<div style="visibility: visible; height: 26px; width: 78px; display: block; position: absolute; line-height: 1px; cursor: pointer; left: 0px; top: 0px;z-index:1;"><div id="plusTool"></div><div id="minusTool"></div><div id="moveTool"></div></div>');
        //$("#wrapDiv").append('<div style="display: block; position: relative; left: 0px; top: 0px; width: 100%; height: 100%; -moz-user-select: none;" id="uploaduserpng"></div>');
        $("#plusTool").attr('title','放大');
        $("#minusTool").attr('title','缩小');
        $("#moveTool").attr('title','拖动');
        $("#plusTool").bind("click",function(){
          _changeOperate('plus');
        });
        $("#minusTool").bind("click",function(){
          _changeOperate('minus');
        });
        $("#moveTool").bind("click",function(){
          _changeOperate('move');
        });
        function plusOperate()
        {
          $("#wrapDiv").unbind();
          $("#wrapDiv").unbind();
          $("#wrapDiv").bind("click",function(){
              var h = $("#wrapDiv").height();
              var w = $("#wrapDiv").width();
              if(Math.round(h*(1+options.changeRadio)) >= maxheight)
              {
                var newH = maxheight;
              }
              else
              {
                var newH = Math.round(h*(1+options.changeRadio));
              }
              if(Math.round(w*(1+options.changeRadio)) >= maxwidth)
              {
                var newW = maxwidth;
              }
              else
              {
                var newW = Math.round(w*(1+options.changeRadio));
              }
              $("#wrapDiv").css("width",newW+"px");
              $("#wrapDiv").css("height",newH+"px");
            });
        }
        function minusOperate()
        {
          $("#wrapDiv").unbind();
          $("#wrapDiv").unbind();
          $("#wrapDiv").bind("click",function(){
              var h = $("#wrapDiv").height();
              var w = $("#wrapDiv").width();
              if(Math.round(h*(1-options.changeRadio)) <= minheight)
              {
                var newH = minheight;
              }
              else
              {
                var newH = Math.round(h*(1-options.changeRadio));
              }
              if(Math.round(w*(1-options.changeRadio)) <= minwidth)
              {
                var newW = minwidth;
              }
              else
              {
                var newW = Math.round(w*(1-options.changeRadio));
              }
              $("#wrapDiv").css("width",newW+"px");
              $("#wrapDiv").css("height",newH+"px");
            });
        }
        function moveOperate()
        {
          $("#wrapDiv").unbind();
          var _move = false;
          var _x,_y;
          $("#wrapDiv").bind("mousedown",function(e){
            _setCursor('grabbing');
            _move = true;
            if(!document.all)
            {
              _x = e.pageX - parseInt($("#wrapDiv").css("left"));
              _y = e.pageY - parseInt($("#wrapDiv").css("top"));
            }
            else
            {
              var pagex = e.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
              var pagey = e.clientY+(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
              _x = pagex - parseInt($("#wrapDiv").css("left"));
              _y = pagey - parseInt($("#wrapDiv").css("top"));
            }
          });
          $("#wrapDiv").bind("mouseup",function(e){
            _setCursor('grab');
            _move = false;
          });
          $("#wrapDiv").bind("mousemove",function(e){
            if(_move)
            {
              if(!document.all)
              {
                var pagex = e.pageX;
                var pagey = e.pageY;
              }
              else
              {
                var pagex = e.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
                var pagey = e.clientY+(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
              }
              var x = pagex-_x;
              var y = pagey-_y;
              $("#wrapDiv").css("top",y);
              $("#wrapDiv").css("left",x);
            }
          });
        }
        function _setCursor(type){
          $("#wrapDiv").css("cursor","url('images/cursors/"+type+".cur'),default");
        }
        function _changeOperate(operate)
        {
          if(operate == 'plus')
          {
            _setCursor('zoom-in');
            plusOperate();
          }
          if(operate == 'minus')
          {
            _setCursor('zoom-out');
            minusOperate();
          }
          if(operate == 'move')
          {
            _setCursor('grab');
            moveOperate();
          }
        }
      }
    });
  };
  $.fn.imageQ.getStatus = function()
  {
    return status;
  };
})(jQuery);

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

PS:在此小编为大家推荐几款javascript格式化美化工具,相信在以后的开发中可以派上用场:

C语言风格/HTML/CSS/json代码格式化美化工具:
http://tools.3water.com/code/ccode_html_css_json

在线JavaScript代码美化、格式化工具:
http://tools.3water.com/code/js

JavaScript代码美化/压缩/格式化/加密工具:
http://tools.3water.com/code/jscompress

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.3water.com/code/jsoncodeformat

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

Javascript 相关文章推荐
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
jquery使用经验小结
May 20 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
js实现随机点名器精简版
Jun 29 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 #Javascript
js实现div模拟模态对话框展现URL内容
May 27 #Javascript
详解jQuery中的deferred对象的使用(一)
May 27 #Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 #Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 #Javascript
Node.js的npm包管理器基础使用教程
May 26 #Javascript
JavaScript中的各种操作符使用总结
May 26 #Javascript
You might like
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
nodejs动态创建二维码的方法
2017/08/12 NodeJs
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
python剪切视频与合并视频的实现
2020/03/03 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
函授本科毕业生自我鉴定
2013/10/16 职场文书
自我鉴定模板
2013/10/29 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
大学生作弊检讨书
2014/02/19 职场文书
工程建设实施方案
2014/03/14 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
人大调研汇报材料
2014/08/14 职场文书
清明节随笔
2015/08/15 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
python如何正确使用yield
2021/05/21 Python