基于jquery自定义图片热区效果


Posted in Javascript onJuly 21, 2012

现在整理下发出来,希望大家共同学习吧

先看效果图:
基于jquery自定义图片热区效果
用了jquery.image-maps.js这个插件 下载地址 https://3water.com/jiaoben/57930.html
原理是:
通过拖动计算出当前热区可移动模块的left top right bottom
对应area的 coords 属性集成上面的位置,就可以实现热区了。
对应的模块代码是:

<!--模块展示 begin--> 
<div class="modeShow"> 
<div id="debug"></div> 
<div class="imgMap mapBox"> 
<img src="../images/hot_images_map.png" name="test" border="0" usemap="#Map1" width="980" height="450" ref='imageMaps' /> 
<map name="Map1"> 
<area shape="rect" coords="300,80,500,150" href="mall.10010.com" /> 
</map> 
</div> 
</div> 
<!--模块展示 end—>

js代码:
(function($) { 
jQuery.fn.imageMaps = function(setting) { 
var $container = this; 
if ($container.length == 0) return false; 
$container.each(function(){ 
var container = $(this); 
var $images = container.find('img[ref=imageMaps]'); 
$images.wrap('<div class="image-maps-conrainer image-maps-conrainerEdit" style="position:relative;"></div>').css('border','1px solid #ccc'); 
$images.each(function(){ 
var _img_conrainer = $(this).parent(); 
_img_conrainer.append('<div class="button-conrainer"><a href="javascript:void(0)" class="addHot">添加热点</a><a href="javascript:void(0)" class="addImg">上传图片</a><a class="delSub delMode" href="javascript:void(0)">删除×</a></div>').append('<div class="link-conrainer"><ul></ul><div class="clr"></div></div><div class="clr"></div><span class="numFloor">模块-1</span>').append($.browser.msie ? $('<div class="position-conrainer" style="position:absolute"></div>').css({ 
background:'#fff', 
opacity:0 
}) : '<div class="position-conrainer" style="position:absolute"></div>'); 
var _img_offset = $(this).offset(); 
var _img_conrainer_offset = _img_conrainer.offset(); 
_img_conrainer.find('.position-conrainer').css({ 
top: _img_offset.top - _img_conrainer_offset.top, 
left: _img_offset.left - _img_conrainer_offset.left, 
width:$(this).width(), 
height:$(this).height(), 
border:'1px solid transparent' 
}); 
var map_name = $(this).attr('usemap').replace('#',''); 
if(map_name !=''){ 
var index = 1; 
var _link_conrainer = _img_conrainer.find('.link-conrainer ul'); 
var _position_conrainer = _img_conrainer.find('.position-conrainer'); 
var image_param = $(this).attr('name') == '' ? '' : '['+ $(this).attr('name') + ']'; 
container.find('map[name='+map_name+']').find('area[shape=rect]').each(function(){ 
var coords = $(this).attr('coords'); 
$(this).attr('ref',"1"); 
_link_conrainer.append('<li ref="'+index+'" class="map-link"><span class="link-number-text">热点'+index+'</span>: <input type="text" size="60" name="link'+index+'" class="linkHref" value="'+$(this).attr('href')+'" /><input type="hidden" class="rect-value" name="rect'+index+'" value="'+coords+'" /></li>'); 
coords = coords.split(','); 
_position_conrainer.append('<div ref="'+index+'" class="map-position" style="left:'+coords[0]+'px;top:'+coords[1]+'px;width:'+(coords[2]-coords[0])+'px;height:'+(coords[3]-coords[1])+'px;"><div class="map-position-bg"></div><span class="link-number-text">热点'+index+'</span><span class="delete">X</span><span class="resize"></span></div>'); 
index++; 
}); 
} 
}); 
}); 
$container.find('.button-conrainer .addHot').live("click",function(){ 
var _link_conrainer = $(this).parent().parent().find('.link-conrainer ul'); 
var _position_conrainer = $(this).parent().parent().find('.position-conrainer'); 
var index = _link_conrainer.find('.map-link').length +1; 
var _coordsMap = $(this).parent().parent().next('map'); 
var image = $(this).parent().parent().find('img[ref=imageMaps]').attr('name'); 
image = (image == '' ? '' : '['+ image + ']'); 
_link_conrainer.append('<li ref="'+index+'" class="map-link"><span class="link-number-text">热点'+index+'</span>: <input type="text" size="60" name="link'+index+'" class="linkHref" value="" /><input type="hidden" class="rect-value" name="rect'+index+'" value="300,80,500,150" /></li>'); 
_position_conrainer.append('<div ref="'+index+'" class="map-position" style="left:300px;top:80px;width:200px;height:70px;"><div class="map-position-bg"></div><span class="link-number-text">热点'+index+'</span><span class="delete">X</span><span class="resize"></span></div>'); 
var coords = _link_conrainer.find('input[name=rect'+ index +']').val(); 
_coordsMap.append('<area ref="'+index+'" href="" coords="'+ coords +'" shape="rect">'); 
$("input[name='link"+index+"']").val("请输入本热点对应的链接地址"); 
bind_map_event(); 
define_css(); 
//添加map热区 
}); 
//修改链接地址 
$(".linkHref").live("blur",function(){ 
var valueHref = $(this).val(); 
var thisRef = $(this).parent().attr('ref'); 
var appArea = $(this).parents(".link-conrainer").parent().next('map'); 
$(this).val(valueHref); 
appArea.find('area[ref='+thisRef+']').attr("href",valueHref); 
}); 
//绑定map事件 
function bind_map_event(){ 
$('.position-conrainer .map-position .map-position-bg').each(function(){ 
var map_position_bg = $(this); 
var conrainer = $(this).parent().parent(); 
map_position_bg.unbind('mousedown').mousedown(function(event){ 
map_position_bg.data('mousedown', true); 
map_position_bg.data('pageX', event.pageX); 
map_position_bg.data('pageY', event.pageY); 
map_position_bg.css('cursor','move'); 
return false; 
}).unbind('mouseup').mouseup(function(event){ 
map_position_bg.data('mousedown', false); 
map_position_bg.css('cursor','default'); 
return false; 
}); 
conrainer.mousemove(function(event){ 
if (!map_position_bg.data('mousedown')) return false; 
var dx = event.pageX - map_position_bg.data('pageX'); 
var dy = event.pageY - map_position_bg.data('pageY'); 
if ((dx == 0) && (dy == 0)){ 
return false; 
} 
var map_position = map_position_bg.parent(); 
var p = map_position.position(); 
var left = p.left+dx; 
if(left <0) left = 0; 
var top = p.top+dy; 
if (top < 0) top = 0; 
var bottom = top + map_position.height(); 
if(bottom > conrainer.height()){ 
top = top-(bottom-conrainer.height()); 
} 
var right = left + map_position.width(); 
if(right > conrainer.width()){ 
left = left-(right-conrainer.width()); 
} 
map_position.css({ 
left:left, 
top:top 
}); 
map_position_bg.data('pageX', event.pageX); 
map_position_bg.data('pageY', event.pageY); 
bottom = top + map_position.height(); 
right = left + map_position.width(); 
var newArea = new Array(left,top,right,bottom).join(','); 
var mapApp = conrainer.parent().next('map'); 
mapApp.find('area[ref='+map_position.attr('ref')+']').attr("coords",newArea); 
$('.link-conrainer li[ref='+map_position.attr('ref')+'] .rect-value').val(newArea); 
return false; 
}).mouseup(function(event){ 
map_position_bg.data('mousedown', false); 
map_position_bg.css('cursor','default'); 
return false; 
}); 
}); 
$('.position-conrainer .map-position .resize').each(function(){ 
var map_position_resize = $(this); 
var conrainer = $(this).parent().parent(); 
map_position_resize.unbind('mousedown').mousedown(function(event){ 
map_position_resize.data('mousedown', true); 
map_position_resize.data('pageX', event.pageX); 
map_position_resize.data('pageY', event.pageY); 
return false; 
}).unbind('mouseup').mouseup(function(event){ 
map_position_resize.data('mousedown', false); 
return false; 
}); 
//点击取消拖动 
conrainer.unbind('click').click(function(event){ 
map_position_resize.data('mousedown', false); 
return false; 
}); 
conrainer.mousemove(function(event){ 
if (!map_position_resize.data('mousedown')) return false; 
var dx = event.pageX - map_position_resize.data('pageX'); 
var dy = event.pageY - map_position_resize.data('pageY'); 
if ((dx == 0) && (dy == 0)){ 
return false; 
} 
var map_position = map_position_resize.parent(); 
var p = map_position.position(); 
var left = p.left; 
var top = p.top; 
var height = map_position.height()+dy; 
if((top+height) > conrainer.height()){ 
height = height-((top+height)-conrainer.height()); 
} 
if (height <20) height = 20; 
var width = map_position.width()+dx; 
if((left+width) > conrainer.width()){ 
width = width-((left+width)-conrainer.width()); 
} 
if(width <50) width = 50; 
map_position.css({ 
width:width, 
height:height 
}); 
map_position_resize.data('pageX', event.pageX); 
map_position_resize.data('pageY', event.pageY); 
bottom = top + map_position.height(); 
right = left + map_position.width(); 
var newArea = new Array(left,top,right,bottom).join(','); 
var mapApp = conrainer.parent().next('map'); 
mapApp.find('area[ref='+map_position.attr('ref')+']').attr("coords",newArea); 
$('.link-conrainer li[ref='+map_position.attr('ref')+'] .rect-value').val(newArea); 
return false; 
}).mouseup(function(event){ 
map_position_resize.data('mousedown', false); 
return false; 
}); 
}); 
$('.position-conrainer .map-position .delete').unbind('click').click(function(){ 
var ref = $(this).parent().attr('ref'); 
var _link_conrainer = $(this).parent().parent().parent().find('.link-conrainer ul'); 
var _coordsMap = $(this).parent().parent().parent().next('map'); 
var _position_conrainer = $(this).parent().parent().parent().find('.position-conrainer'); 
_link_conrainer.find('.map-link[ref='+ref+']').remove(); 
_position_conrainer.find('.map-position[ref='+ref+']').remove(); 
_coordsMap.find('area[ref='+ref+']').remove(); 
var index = 1; 
_link_conrainer.find('.map-link').each(function(){ 
$(this).attr('ref',index).find('.link-number-text').html('热点'+index); 
index ++; 
}); 
index = 1; 
_position_conrainer.find('.map-position').each(function(){ 
$(this).attr('ref',index).find('.link-number-text').html('热点'+index); 
index ++; 
}); 
index = 1; 
_coordsMap.find('area').each(function(){ 
$(this).attr('ref',index); 
index ++; 
}); 
}); 
} 
bind_map_event(); 
function define_css(){ 
//样式定义 
$container.find('.map-position .resize').css({ 
display:'block', 
position:'absolute', 
right:0, 
bottom:0, 
width:5, 
height:5, 
cursor:'nw-resize', 
background:'#000' 
}); 
} 
define_css(); 
}; 
})(jQuery);

页面引用:$('.imgMap').imageMaps();
Javascript 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 Javascript
Js四则运算函数代码
Jul 21 #Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 #Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 #Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 #Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 #Javascript
基于jquery的可多选的下拉列表框
Jul 20 #Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 #Javascript
You might like
php MySQL与分页效率
2008/06/04 PHP
PHP函数常用用法小结
2010/02/08 PHP
php中{}大括号是什么意思
2013/12/01 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
php自定义时间转换函数示例
2016/12/07 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
用python生成1000个txt文件的方法
2018/10/25 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
简历自我评价怎么写好呢?
2014/01/04 职场文书
企业文化宣传标语
2014/06/09 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL