jquery_jquery に基づいたカスタマイズされたイメージホットゾーン効果

今、それを整理して投稿しました。皆さんも一緒に学んでいただければ幸いです。

最初にレンダリングを見てください: jquery.image-maps.js プラグを使用しました。ダウンロード アドレス http://www.jb51.net/jiaoben/57930.html 原理は次のとおりです: ドラッグして現在のホット ゾーン可動モジュールの左上右下を計算します エリアに対応するcoords属性が位置の上に統合され、ホットゾーンが実現できます。 対応するモジュール コードは次のとおりです:

コードをコピー コードは次のとおりです:

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=rect' インデックス ']').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); find ('area[ref=' thisRef ']').attr("href",valueHref); //バインドマップイベント function binding_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); return }); 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 マップ位置 = マップ位置_bg.parent(); var p = マップ位置.position(); var left = p.left dx; if(left var top = p.top dy; if (top varbottom = top map_position.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 = 上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') '] .rect-value').val(newArea); return false; }).mouseup(function(event){ map_position_bg.data(' ', false); map_position_bg.css('cursor','default'); $('.position-conrainer .マップ位置 .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 = イベント.ページX - マップ位置_resize.data('pageX'); var dy = イベント.ページY - マップ位置_resize.data('ページY'); if ((dx == 0) && (dy == 0) )){ return false; } var map_position =map_position.position(); var left = p.left; var top = p.top; var height = map_position.height() dy; if((上部の高さ) > conrainer.height()){ 高さ = height-((上部の高さ) -conrainer.height()); } if (高さ if((左の幅) > conrainer.width()){ width = width-((left width)-conrainer.width()); } if(width map_position. css({ 幅:幅, 高さ:高さ }); map_position_resize.data('pageX',event.pageX); map_position_resize.data('pageY',even .pageY); bottom = 上マップ位置.高さ(); 右 = 左マップ位置.幅(); var newArea = new Array(left,top,right,bottom); '); var mapApp = conrainer.parent().next('map'); mapApp.find('area[ref=' map_position.attr('ref') ']').attr( "座標",newArea); $('.link-conrainer li[ref='map_position.attr('ref') '] .rect-value').val(newArea); }).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'); ().parent().parent().next('map'); var 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(); _link_conrainer.find('.map-link'); (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('热点' インデックス ; }); _coordsMap.find('エリア'); function(){ $(this).attr('ref',index) ; }); } bind_map_event(); function define_css(){ //样式定义 $container.find('.map-position .resize').css({ display:'block', position: 'absolute'、 右:0、 下:0、 幅:5、 高さ:5、 カーソル:'nw-resize'、 背景:'# 000' }); } define_css(); }; })(jQuery);

面参照：$('.imgMap').imageMaps();

jquery_jquery に基づいたカスタマイズされたイメージ ホット ゾーン効果

jquery_jquery に基づいたカスタマイズされたイメージホットゾーン効果