jQuery实现鼠标经过弹出提示信息的地图热点效果


Posted in Javascript onAugust 07, 2015

本文实例讲述了jQuery实现鼠标经过弹出提示信息的地图热点效果。分享给大家供大家参考。具体如下:

这里的jQuery鼠标经过弹出提示信息地图热点效果,很多网站上有用到,送给大家,对作者表示感谢。

运行效果截图如下:

jQuery实现鼠标经过弹出提示信息的地图热点效果

具体代码如下:

<!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('//img.jbzj.com/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="//img.jbzj.com/file_images/article/201508/201587110854867.png" />
<map name="Map" id="Map">
 <area id="beijing" alt="北京" href="forum.php?gid=1" coords="354,140,380,153" shape="rect">
 <area id="shanghai" alt="上海" href="forum.php?gid=3" coords="434,246,462,259" shape="rect">
 <area id="tianjin" alt="天津" href="forum.php?gid=2" coords="382,168,408,180" shape="rect">
 <area id="chongqing" alt="重庆" href="forum.php?gid=4" coords="294,264,320,276" shape="rect">
 <area id="hebei" alt="河北" href="forum.php?gid=5" coords="347,174,374,186" shape="rect">
 <area id="shanxi" alt="山西" href="forum.php?gid=6" coords="322,186,348,198" shape="rect">
 <area id="neimenggu" alt="内蒙古" href="forum.php?gid=7" coords="349,110,388,124" shape="rect">
 <area id="liaoning" alt="辽宁" href="forum.php?gid=8" coords="406,128,432,140" shape="rect">
 <area id="jilin" alt="吉林" href="forum.php?gid=9" coords="427,101,454,115" shape="rect">
 <area id="heilongjiang" alt="黑龙江" href="forum.php?gid=10" coords="424,58,464,73" shape="rect">
 <area id="jiangsu" alt="江苏" href="forum.php?gid=11" coords="404,224,417,250" shape="rect">
 <area id="zhejiang" alt="浙江" href="forum.php?gid=12" coords="413,265,427,291" shape="rect">
 <area id="anhui" alt="安徽" href="forum.php?gid=13" coords="382,236,395,263" shape="rect">
 <area id="fujian" alt="福建" href="forum.php?gid=14" coords="399,300,413,327" shape="rect">
 <area id="jiangxi" alt="江西" href="forum.php?gid=15" coords="371,286,385,313" shape="rect">
 <area id="shandong" alt="山东" href="forum.php?gid=16" coords="373,196,399,208" shape="rect">
 <area id="henan" alt="河南" href="forum.php?gid=17" coords="337,228,364,239" shape="rect">
 <area id="hubei" alt="湖北" href="forum.php?gid=18" coords="329,258,356,271" shape="rect">
 <area id="hunan" alt="湖南" href="forum.php?gid=19" coords="325,294,352,306" shape="rect">
 <area id="guangdong" alt="广东" href="forum.php?gid=20" coords="356,343,382,355" shape="rect">
 <area id="guangxi" alt="广西" href="forum.php?gid=21" coords="302,343,328,355" shape="rect">
 <area id="hainan" alt="海南" href="forum.php?gid=22" coords="313,398,340,411" shape="rect">
 <area id="sichuan" alt="四川" href="forum.php?gid=23" coords="239,265,265,277" shape="rect">
 <area id="guizhou" alt="贵州" href="forum.php?gid=24" coords="283,311,308,324" shape="rect">
 <area id="yunnan" alt="云南" href="forum.php?gid=25" coords="225,337,251,349" shape="rect">
 <area id="shaanxi" alt="陕西" href="forum.php?gid=26" coords="303,224,316,251" shape="rect">
 <area id="gansu" alt="甘肃" href="forum.php?gid=27" coords="179,156,205,168" shape="rect">
 <area id="qinghai" alt="青海" href="forum.php?gid=28" coords="174,206,200,218" shape="rect">
 <area id="ningxia" alt="宁夏" href="forum.php?gid=29" coords="277,188,290,212" shape="rect">
 <area id="xinjiang" alt="新疆" href="forum.php?gid=30" coords="85,140,111,152" shape="rect">
 <area id="xizang" alt="西藏" href="forum.php?gid=31" coords="87,249,113,261" shape="rect">
 <area id="xianggang" alt="香港" href="forum.php?gid=32" coords="379,358,406,370" shape="rect">
 <area id="aomen" alt="澳门" href="forum.php?gid=33" coords="349,371,375,383" shape="rect">
 <area id="taiwan" alt="台湾" href="forum.php?gid=34" coords="434,322,448,348" shape="rect">
</map>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript 流畅动画实现原理
Sep 08 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
jQuery与getJson结合的用法实例
Aug 07 #Javascript
《JavaScript函数式编程》读后感
Aug 07 #Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 #Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 #Javascript
C++中的string类的用法小结
Aug 07 #Javascript
Grunt入门教程(自动任务运行器)
Aug 06 #Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 #Javascript
You might like
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
第十三节 对象串行化 [13]
2006/10/09 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
浅谈php7的重大新特性
2015/10/23 PHP
php简单统计在线人数的方法
2016/05/10 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
伦敦一卡通:The London Pass
2018/11/30 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
法学专业自我鉴定
2014/02/05 职场文书
可口可乐广告词
2014/03/20 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android