jQuery implémente l'effet de point chaud de la carte des informations d'invite contextuelle lorsque la souris passe dessus it

jQuery implémente l'effet de point chaud de la carte des informations d'invite contextuelle lorsque la souris passe dessus it_jquery

WBOY

Libérer： 2016-05-16 15:46:33

original

1131 Les gens l'ont consulté

L'exemple de cet article décrit comment jQuery implémente l'effet de point chaud de la carte des informations d'invite contextuelle lorsque la souris passe. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

L'effet de point d'accès de la carte contextuelle de la souris jQuery est utilisé ici sur de nombreux sites Web. Je le donne à tout le monde et exprime ma gratitude à l'auteur.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!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 implémente l'effet de point chaud de la carte des informations d'invite contextuelle lorsque la souris passe dessus it_jquery" >
<map name="Map" id="Map">
 <area id="beijing" alt="jQuery implémente leffet de point chaud de la carte des informations dinvite contextuelle lorsque la souris passe dessus it_jquery" 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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.