jQuery melaksanakan kesan tempat liputan peta maklumat segera pop timbul apabila tetikus melepasinya

jQuery melaksanakan kesan tempat liputan peta maklumat segera pop timbul apabila tetikus melepasinya_jquery

WBOY

Lepaskan： 2016-05-16 15:46:33

asal

1092 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan kesan tempat liputan peta maklumat gesaan pop timbul apabila tetikus berlalu. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Kesan hotspot peta timbul tetikus jQuery di sini digunakan pada banyak tapak web, saya berikan kepada semua orang dan mengucapkan terima kasih kepada pengarang.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

<!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 melaksanakan kesan tempat liputan peta maklumat segera pop timbul apabila tetikus melepasinya_jquery" >
<map name="Map" id="Map">
 <area id="beijing" alt="jQuery melaksanakan kesan tempat liputan peta maklumat segera pop timbul apabila tetikus melepasinya_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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.