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

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

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

(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("");
 $("#wrapDiv").before('');
 //$("#wrapDiv").append('');
 $("#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.jb51.net/code/ccode_html_css_json

在线Javascript代码美化、格式化工具：
http://tools.jb51.net/code/js

Javascript代码美化/压缩/格式化/加密工具：
http://tools.jb51.net/code/jscompress

在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json

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

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

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