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

2020-05-22 16:05:15易采站长站整理

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);