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 相关文章推荐
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
微信小程序入门之指南针
Oct 22 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
浅谈克隆 JavaScript
Nov 02 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
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
linux面试相关问题
2012/08/11 面试题
优秀教师个人总结
2015/02/11 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
2015年底工作总结范文
2015/05/15 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书