基于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 相关文章推荐
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
Javascript中this的用法详解
Sep 22 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 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页面函数设置超时限制的方法
2014/12/01 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
Python fileinput模块使用介绍
2014/11/30 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python3中zip()函数使用详解
2018/06/29 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
解决Django中多条件查询的问题
2019/07/18 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
正规的求职信范文分享
2013/12/11 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
运动会邀请函范文
2014/02/06 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python