本文实例讲述了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"#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"#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程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月20日
2024年11月20日
- 柏菲·珞叔作品集《金色大厅2》限量开盘母带ORMCD[低速原抓WAV+CUE]
- Gareth.T《sad songs(Explicit)》[320K/MP3][29.03MB]
- Gareth.T《sad songs(Explicit)》[FLAC/分轨][152.85MB]
- 证声音乐图书馆《海风摇曳·盛夏爵士曲》[320K/MP3][63.06MB]
- 龚玥《金装龚玥HQCD》头版限量[WAV分轨]
- 李小春《吻别》萨克斯演奏经典[原抓WAV+CUE]
- 齐秦《辉煌30年24K珍藏版》2CD[WAV+CUE]
- 证声音乐图书馆《海风摇曳·盛夏爵士曲》[FLAC/分轨][321.47MB]
- 群星 《世界经典汽车音乐》 [WAV分轨][1G]
- 冷漠.2011 《冷漠的爱DSD》[WAV+CUE][1.2G]
- 陈明《流金岁月精逊【中唱】【WAV+CUE】
- 群星《Jazz-Ladies1-2爵士女伶1-2》HQCD/2CD[原抓WAV+CUE]
- 群星《美女私房歌》(黑胶)[WAV分轨]
- 郑源.2009《试音天碟》24BIT-96KHZ[WAV+CUE][1.2G]
- 飞利浦试音碟 《环球群星监听录》SACD香港版[WAV+CUE][1.1G]