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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
javascript 文档的编码问题解决
Mar 01 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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
PHP 翻页 实例代码
2009/08/07 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
vue实现抖音时间转盘
2019/09/08 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python实现网页自动签到功能
2019/01/21 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
美国现代家具购物网站:LexMod
2019/01/09 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
什么是.net
2015/08/03 面试题
介绍一下如何优化MySql
2016/12/20 面试题
《有趣的发现》教学反思
2014/04/15 职场文书
汽车转让协议书
2015/01/29 职场文书
环境卫生整治简报
2015/07/20 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技