suchen

Heim >Web-Frontend >js-Tutorial >jQuery implementiert den Karten-Hotspot-Effekt von Popup-Eingabeaufforderungsinformationen, wenn die Maus über it_jquery fährt

jQuery implementiert den Karten-Hotspot-Effekt von Popup-Eingabeaufforderungsinformationen, wenn die Maus über it_jquery fährt

WBOY
WBOYOriginal
2016-05-16 15:46:331139Durchsuche

Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung des Karten-Hotspot-Effekts, der Eingabeaufforderungsinformationen anzeigt, wenn die Maus vorbeifährt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der jQuery-Maus-Popup-Karten-Hotspot-Effekt wird hier auf vielen Websites verwendet. Ich gebe ihn allen und drücke dem Autor meinen Dank aus.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery地图热点效果-鼠标经过弹出提示信息</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
.map img { width:496px; height: 415px; }
.mapDiv { width:140px; height:61px; padding: 5px; color:#369; background: url('http://files.jb51.net/file_images/article/201508/201587110632401.gif') no-repeat; position:absolute; display: none; word-break:break-all; }
</style>
<script type="text/javascript">
 $(document).ready(function(){
  $("area").each(function(){
   var $x=-70;
   var $y=-80; 
   var name=$(this).attr("alt"); 
   $(this).mouseover(function(e){
    var index_num=$(this).index();
    var dom="<div class='mapDiv'><p>提示消息<span class='name'></span><span class='num'></span></p></div>";
    $("body").append(dom);
    $(".name").text(name);
    $(".num").text(index_num)
    $(".mapDiv").css({
      top: (e.pageY + $y)+"px",
      left: (e.pageX + $x)+"px"
     }).show("fast");
   }).mouseout(function(){    
     $(".mapDiv").remove();
   }).mousemove(function(e){
     $(".mapDiv").css({
      top: (e.pageY + $y)+"px",
      left: (e.pageX + $x)+"px"
    })
   });
  });   
 })
</script>
</head>
<body>
<div class="map">
<img  border="0" usemap="#Map" src="http://files.jb51.net/file_images/article/201508/201587110854867.png" / alt="jQuery implementiert den Karten-Hotspot-Effekt von Popup-Eingabeaufforderungsinformationen, wenn die Maus über it_jquery fährt" >
<map name="Map" id="Map">
 <area id="beijing" alt="jQuery implementiert den Karten-Hotspot-Effekt von Popup-Eingabeaufforderungsinformationen, wenn die Maus über it_jquery fährt" href="forum.php&#63;gid=1" coords="354,140,380,153" shape="rect">
 <area id="shanghai" alt="上海" href="forum.php&#63;gid=3" coords="434,246,462,259" shape="rect">
 <area id="tianjin" alt="天津" href="forum.php&#63;gid=2" coords="382,168,408,180" shape="rect">
 <area id="chongqing" alt="重庆" href="forum.php&#63;gid=4" coords="294,264,320,276" shape="rect">
 <area id="hebei" alt="河北" href="forum.php&#63;gid=5" coords="347,174,374,186" shape="rect">
 <area id="shanxi" alt="山西" href="forum.php&#63;gid=6" coords="322,186,348,198" shape="rect">
 <area id="neimenggu" alt="内蒙古" href="forum.php&#63;gid=7" coords="349,110,388,124" shape="rect">
 <area id="liaoning" alt="辽宁" href="forum.php&#63;gid=8" coords="406,128,432,140" shape="rect">
 <area id="jilin" alt="吉林" href="forum.php&#63;gid=9" coords="427,101,454,115" shape="rect">
 <area id="heilongjiang" alt="黑龙江" href="forum.php&#63;gid=10" coords="424,58,464,73" shape="rect">
 <area id="jiangsu" alt="江苏" href="forum.php&#63;gid=11" coords="404,224,417,250" shape="rect">
 <area id="zhejiang" alt="浙江" href="forum.php&#63;gid=12" coords="413,265,427,291" shape="rect">
 <area id="anhui" alt="安徽" href="forum.php&#63;gid=13" coords="382,236,395,263" shape="rect">
 <area id="fujian" alt="福建" href="forum.php&#63;gid=14" coords="399,300,413,327" shape="rect">
 <area id="jiangxi" alt="江西" href="forum.php&#63;gid=15" coords="371,286,385,313" shape="rect">
 <area id="shandong" alt="山东" href="forum.php&#63;gid=16" coords="373,196,399,208" shape="rect">
 <area id="henan" alt="河南" href="forum.php&#63;gid=17" coords="337,228,364,239" shape="rect">
 <area id="hubei" alt="湖北" href="forum.php&#63;gid=18" coords="329,258,356,271" shape="rect">
 <area id="hunan" alt="湖南" href="forum.php&#63;gid=19" coords="325,294,352,306" shape="rect">
 <area id="guangdong" alt="广东" href="forum.php&#63;gid=20" coords="356,343,382,355" shape="rect">
 <area id="guangxi" alt="广西" href="forum.php&#63;gid=21" coords="302,343,328,355" shape="rect">
 <area id="hainan" alt="海南" href="forum.php&#63;gid=22" coords="313,398,340,411" shape="rect">
 <area id="sichuan" alt="四川" href="forum.php&#63;gid=23" coords="239,265,265,277" shape="rect">
 <area id="guizhou" alt="贵州" href="forum.php&#63;gid=24" coords="283,311,308,324" shape="rect">
 <area id="yunnan" alt="云南" href="forum.php&#63;gid=25" coords="225,337,251,349" shape="rect">
 <area id="shaanxi" alt="陕西" href="forum.php&#63;gid=26" coords="303,224,316,251" shape="rect">
 <area id="gansu" alt="甘肃" href="forum.php&#63;gid=27" coords="179,156,205,168" shape="rect">
 <area id="qinghai" alt="青海" href="forum.php&#63;gid=28" coords="174,206,200,218" shape="rect">
 <area id="ningxia" alt="宁夏" href="forum.php&#63;gid=29" coords="277,188,290,212" shape="rect">
 <area id="xinjiang" alt="新疆" href="forum.php&#63;gid=30" coords="85,140,111,152" shape="rect">
 <area id="xizang" alt="西藏" href="forum.php&#63;gid=31" coords="87,249,113,261" shape="rect">
 <area id="xianggang" alt="香港" href="forum.php&#63;gid=32" coords="379,358,406,370" shape="rect">
 <area id="aomen" alt="澳门" href="forum.php&#63;gid=33" coords="349,371,375,383" shape="rect">
 <area id="taiwan" alt="台湾" href="forum.php&#63;gid=34" coords="434,322,448,348" shape="rect">
</map>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery implementiert den Effekt einer Informationsaufforderungsbox (mit abgerundeten Ecken und Animation)_jqueryNächster Artikel：jQuery implementiert den Effekt einer Informationsaufforderungsbox (mit abgerundeten Ecken und Animation)_jquery

In Verbindung stehende Artikel

Mehr sehen