Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例

下面是“Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例”攻略的详细讲解。

准备工作

在进行本次实例之前，需要先从以下网址中下载jQuery插件：

https://code.jquery.com/jquery-3.6.0.min.js

下载完成后，将该文件放置在项目的js文件夹中。

HTML结构

这个实例中使用了一个div元素来作为中国地图的容器，同时也需要一个div元素来作为提示层。HTML代码如下：

<div id="china-map">
  <div id="tip" style="display:none;"></div>
</div>

CSS样式

对于中国地图容器和提示层，需要相应的CSS样式。这里给出了一份简单的CSS样式。

#china-map{
  position: relative;
  width: 660px;
  height: 440px;
  background: url(images/china-map.png) no-repeat;
  cursor: pointer;
}
#tip{
  position: absolute;
  display: block;
  width: 240px;
  height: 120px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  padding: 10px;
  font-size: 14px;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -120px;
}

JavaScript代码

在HTML文件中引入jQuery插件之后，需要再引入一份JavaScript代码。在该代码中，会对每个省份的区域进行绑定鼠标事件，并在鼠标悬浮时显示对应信息的提示层。

$(function(){
  var area = [
    {name:"北京", code:"110000", x:301, y:187},
    {name:"上海", code:"310000", x:432, y:253},
    {name:"天津", code:"120000", x:283, y:209},
    // 其它省份省略

  ];

  for (var i = 0; i < area.length; i++) {
    $("#china-map").append("<div id='" + area[i].code + "'><\/div>");
    $("#" + area[i].code).css({
      "position": "absolute",
      "width": "24px",
      "height": "24px",
      "left": area[i].x + "px",
      "top": area[i].y + "px",
      "background-color": "#ff0",
      "border-radius": "12px",
      "opacity": "0.5"
    }).mouseover(showInfo).mouseout(hideInfo);
  }

  function showInfo(e){
    var name = area[this.id - 110000].name;
    var x = e.pageX - 100;
    var y = e.pageY - 100;
    $("#tip").css({"left":x + "px", "top":y + "px"});
    $("#tip").html("<strong>" + name + "<\/strong><br>这里是" + name + "省份的介绍文字。");
    $("#tip").show();
  }

  function hideInfo(){
    $("#tip").hide();
  }
});

在这份JavaScript代码中，定义了一个以"area"变量保存的对象数组，其中每个对象代表一个省份，包含省份的名称、编码、左上角坐标等信息。然后通过循环遍历"area"数组，逐个绑定省份区域的鼠标事件。

绑定鼠标事件的代码如下：

.mouseover(showInfo).mouseout(hideInfo);

这里传入了两个函数作为参数，其中"showInfo()"函数用于在鼠标悬浮时显示提示层信息，"hideInfo()"函数用于在鼠标移出时隐藏提示层。

"showInfo()"函数用到了事件对象"e"的属性"pageX"和"pageY"，通过计算得到提示层的位置，然后在提示层中显示对应省份的名称和介绍文字。

示例说明

示例1：修改提示层样式

在CSS样式中修改提示层的样式，比如将它的背景色改为红色，那么需要修改代码如下：

#tip{
  position: absolute;
  display: block;
  width: 240px;
  height: 120px;
  background: #f00; /* 改为红色 */
  border: 1px solid #ccc;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  padding: 10px;
  font-size: 14px;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -120px;
}

示例2：添加鼠标单击事件

在每个省份的区域上添加鼠标单击事件，当鼠标单击时，弹出该省份的详细信息。可以通过修改"for"循环中的代码来完成，如下所示：

for (var i = 0; i < area.length; i++) {
  $("#china-map").append("<div id='" + area[i].code + "'><\/div>");
  $("#" + area[i].code).css({
    "position": "absolute",
    "width": "24px",
    "height": "24px",
    "left": area[i].x + "px",
    "top": area[i].y + "px",
    "background-color": "#ff0",
    "border-radius": "12px",
    "opacity": "0.5"
  }).mouseover(showInfo).mouseout(hideInfo).click(function(){
    var name = area[this.id - 110000].name;
    alert(name + "省份的详细信息。");
  });
}

在这个示例中，添加了"click"事件，当鼠标单击时，弹出该省份的详细信息。你可以根据需要修改弹出信息的内容和样式。

以上是两个示例说明，希望对你有所帮助。