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 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php中JSON的使用与转换
2015/01/14 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
jquery cookie插件代码类
2009/05/26 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
详解react-redux插件入门
2018/04/19 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
python写xml文件的操作实例
2014/10/05 Python
初步探究Python程序的执行原理
2015/04/11 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python学习开发mock接口
2019/04/28 Python
Python shutil模块用法实例分析
2019/10/02 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
中学生个人自我评价
2014/02/06 职场文书
企业文化建设实施方案
2014/03/22 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
环保标语口号
2014/06/13 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
班级活动总结格式
2014/08/30 职场文书