jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法。分享给大家供大家参考，具体如下：
综合网上一些代码自己写的一个图片缩放拖拽的小插件
/**
*
*<ahref="http://lib.csdn.net/base/22"class='replace_word'title="jQuery知识库"target='_blank'style='color:#df3434;font-weight:bold;'>jQuery</a>imageQplugin
*@namejquery-imageQ.js
*@authorQ
*@date2011-01-19
*maxRatio最大放大比例
*minRatio最小缩小比例
*changeRadio每次变化幅度
*picUrl:图片地址,
*picWidth:图片宽度,
*picHeight:图片高度,
*reset:是否重设图片
*
*/
(function($){
varstatus=false;
$.fn.imageQ=function(options){
vardefaults={
maxRatio:4,
minRatio:4,
changeRadio:0.2,
picUrl:'',
picWidth:306,
picHeight:372,
reset:false
}
varoptions=jQuery.extend(defaults,options);
returnthis.each(function(){
status=true;
$(this).attr('src','');
$(this).attr('src',options.picUrl);
varnaturalwidth=options.picWidth;
varnaturalheight=options.picHeight;
varminwidth=Math.round(naturalwidth/options.minRatio);
varminheight=Math.round(naturalheight/options.minRatio);
varmaxwidth=Math.round(naturalwidth*options.maxRatio);
varmaxheight=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("<divid='wrapDiv'style='-moz-user-select:none;width:"+naturalwidth+"px;height:"+naturalheight+"px;cursor:move;position:relative;top:0px;left:0px;visibility:visible;'ondragstart='returnfalse;'onselectstart='returnfalse;'></div>");
$("#wrapDiv").before('<divstyle="visibility:visible;height:26px;width:78px;display:block;position:absolute;line-height:1px;cursor:pointer;left:0px;top:0px;z-index:1;"><divid="plusTool"></div><divid="minusTool"></div><divid="moveTool"></div></div>');
//$("#wrapDiv").append('<divstyle="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');
});
functionplusOperate()
{
$("#wrapDiv").unbind();
$("#wrapDiv").unbind();
$("#wrapDiv").bind("click",function(){
varh=$("#wrapDiv").height();
varw=$("#wrapDiv").width();
if(Math.round(h*(1+options.changeRadio))>=maxheight)
{
varnewH=maxheight;
}
else
{
varnewH=Math.round(h*(1+options.changeRadio));
}
if(Math.round(w*(1+options.changeRadio))>=maxwidth)
{
varnewW=maxwidth;
}
else
{
varnewW=Math.round(w*(1+options.changeRadio));
}
$("#wrapDiv").css("width",newW+"px");
$("#wrapDiv").css("height",newH+"px");
});
}
functionminusOperate()
{
$("#wrapDiv").unbind();
$("#wrapDiv").unbind();
$("#wrapDiv").bind("click",function(){
varh=$("#wrapDiv").height();
varw=$("#wrapDiv").width();
if(Math.round(h*(1-options.changeRadio))<=minheight)
{
varnewH=minheight;
}
else
{
varnewH=Math.round(h*(1-options.changeRadio));
}
if(Math.round(w*(1-options.changeRadio))<=minwidth)
{
varnewW=minwidth;
}
else
{
varnewW=Math.round(w*(1-options.changeRadio));
}
$("#wrapDiv").css("width",newW+"px");
$("#wrapDiv").css("height",newH+"px");
});
}
functionmoveOperate()
{
$("#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
{
varpagex=e.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
varpagey=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)
{
varpagex=e.pageX;
varpagey=e.pageY;
}
else
{
varpagex=e.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
varpagey=e.clientY+(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
}
varx=pagex-_x;
vary=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()
{
returnstatus;
};
})(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程序设计有所帮助。