基于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 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
JavaScript实现更换背景图片
Oct 18 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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP伪静态页面函数附使用方法
2008/06/20 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python 加密与解密小结
2018/12/06 Python
Python关于反射的实例代码分享
2020/02/20 Python
Django中ORM的基本使用教程
2020/12/22 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
个人求职信范文分享
2014/01/06 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
天猫活动策划方案
2014/08/21 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
检讨书范文大全
2015/05/07 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
创业计划之特色精品店
2019/08/12 职场文书
用JS写一个发布订阅模式
2021/11/07 Javascript
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android