本文实例讲述了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.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程序设计有所帮助。
易网时代-编程资源站