本文实例讲述了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程序设计有所帮助。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)”评论...
更新日志
2025年10月29日
2025年10月29日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]