jquery_jquery를 기반으로 한 맞춤형 이미지 핫존 효과

이제 정리해서 올렸으니 다들 함께 배워보셨으면 좋겠습니다

먼저 렌더링을 보세요: jquery.image-maps.js 플러그인을 사용했어요- 다운로드 주소 http:/ /www.jb51.net/jiaoben/57930.html 원리는 현재 핫존 이동 가능 모듈의 왼쪽 위 오른쪽 아래를 드래그하여 계산합니다. 🎜>해당 위치에 해당하는 좌표 속성이 위 위치에 통합되어 핫존 구현이 가능합니다. 해당 모듈 코드는

코드 복사 코드는 다음과 같습니다.

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(' ').css('border','1px solid #ccc'); $images.each(function(){ var _img_conrainer = $(this).parent(); _img_conrainer.append(' 添加热点 上传图片 删除× ').append(' 模块-1 ').append($.browser.msie ? $(' ').css({ background:'#fff', opacity:0 }) : ' '); 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(' 热点'+index+' : '); coords = coords.split(','); _position_conrainer.append(' 热点'+index+' X '); 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(' 热点'+index+' : '); _position_conrainer.append(' 热点'+index+' X '); var coords = _link_conrainer.find('input[name=ret' index ']').val() _coordsMap.append(' ') $("input[name='link" index "']").val("이 항목에 해당하는 링크를 입력하세요. 핫스팟 주소"); bind_map_event(); define_css(); //지도 핫 영역 추가 }); //링크 주소 수정 $(".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); }) //맵 이벤트 바인딩 functionbind_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)){ false를 반환합니다. } var map_position = map_position_bg.parent(); var p = map_position.position() var left = p.left dx if(left var top = p.top dy if (top 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(); 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') '] .direct-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((상단 높이) > conrainer.height()){ height = height-((상단 높이) -conrainer.height()); } if (height var width = map_position.width() dx; conrainer.width()){ width = width-((왼쪽 너비)-conrainer.width()) } if(width 너비:너비, 높이:높이 }) map_position_resize.data('pageX', event.pageX) map_position_resize.data('pageY', 이벤트 .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') '] .direct-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'). (function(){ $(this).attr('ref',index).find('.link-number-text').html('热点' 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(); 함수 정의_css(){ //样式정义 $container.find('.map-position .resize').css({ display:'block', 위치: '절대', 오른쪽:0, 하단:0, 너비:5, 높이:5, 커서:'nw-resize', 배경:'# 000' }); } define_css(); }; })(jQuery);

页face引用：$('.imgMap').imageMaps();