基于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一句话全选/取消全选
Mar 01 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
纯javascript版日历控件
Nov 24 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
JS实现图片切换效果
Nov 17 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
JS document内容及样式操作完整示例
Jan 14 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 daodb插入、更新与删除数据
2009/03/19 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
Node.js事件驱动
2015/06/18 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python金融数据可视化汇总
2017/11/17 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
Python实现壁纸下载与轮换
2020/10/19 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
Shell编程面试题
2012/05/30 面试题
纪念建党演讲稿范文
2014/01/13 职场文书
商务经理岗位职责
2014/08/03 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书