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


Posted in Javascript onApril 26, 2015

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>地图热点效果-鼠标经过弹出提示信息</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<script src="/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script><!-- 建议用1.7的jquery -->
<script type="text/javascript">var jq = jQuery.noConflict();</script><!-- 为了让DZ X2支持jquery 加载时替换库中的$为jq -->
<style type="text/css">
.map img { width:496px; height: 415px; }
.mapDiv { padding: 5px; width:170px; height:61px; color:#369; background: url('hotarrow.gif') no-repeat; }
</style><!-- CSS样式 -->
<body>
<!-- JS 如果需要读取变量最好写在网页里,也可以写在JS文件里!-->
<script type="text/javascript">
jq(document).ready(function(){
jQuery.fn.extend({
TitleShow: function(strHTML) {
var xOffset = 80;
var yOffset = -75;
var preview = jq("#preview_container");
if(preview.length<=0){
jq("body").append("<div id='preview_container'></div>");
preview = jq("#preview_container");
}
preview.css({
"display":"none",
"position":"absolute",
"width":"150px",
"word-break":"break-all"
});
return this.each(function() {
var _this = jq(this);
_this.hover(
function(e){
preview.html(strHTML);
preview
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.css("opaticy",0)
.show()
.stop()
.animate({"opacity":0.9},300);

},function(){
preview
.stop()
.animate({"opacity":0},300,function(){
jq(this).hide();
});
}
)
_this.mousemove(function(e){
preview
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
});
}
});
jq("#beijing").TitleShow("<div class='mapDiv'>北京地图热点效果-这里是测试换行效果-这里是测试换行效果</div>");
jq("#tianjin").TitleShow("<div class='mapDiv'>天津地图热点效果2</div>");
jq("#shanghai").TitleShow("<div class='mapDiv'>上海地图热点效果3</div>");
jq("#chongqing").TitleShow("<div class='mapDiv'>重庆地图热点效果4</div>");
jq("#hebei").TitleShow("<div class='mapDiv'>河北地图热点效果5</div>");
jq("#shanxi").TitleShow("<div class='mapDiv'>山西地图热点效果6</div>");
jq("#neimenggu").TitleShow("<div class='mapDiv'>内蒙古地图热点效果7</div>");
jq("#liaoning").TitleShow("<div class='mapDiv'>地图热点效果8</div>");
jq("#jilin").TitleShow("<div class='mapDiv'>地图热点效果9</div>");
jq("#heilongjiang").TitleShow("<div class='mapDiv'>黑龙江地图热点效果10</div>");
jq("#jiangsu").TitleShow("<div class='mapDiv'>地图热点效果11</div>");
jq("#zhejiang").TitleShow("<div class='mapDiv'>地图热点效果12</div>");
jq("#anhui").TitleShow("<div class='mapDiv'>地图热点效果13</div>");
jq("#fujian").TitleShow("<div class='mapDiv'>地图热点效果14</div>");
jq("#jiangxi").TitleShow("<div class='mapDiv'>地图热点效果15</div>");
jq("#shandong").TitleShow("<div class='mapDiv'>山东地图热点效果16</div>");
jq("#henan").TitleShow("<div class='mapDiv'>河南地图热点效果17</div>");
jq("#hubei").TitleShow("<div class='mapDiv'>湖北地图热点效果18</div>");
jq("#hunan").TitleShow("<div class='mapDiv'>地图热点效果l9</div>");
jq("#guangdong").TitleShow("<div class='mapDiv'>地图热点效果20e</div>");
jq("#guangxi").TitleShow("<div class='mapDiv'>地图热点效果21</div>");
jq("#hainan").TitleShow("<div class='mapDiv'>地图热点效果22</div>");
jq("#sichuan").TitleShow("<div class='mapDiv'>地图热点效果23</div>");
jq("#guizhou").TitleShow("<div class='mapDiv'>地图热点效果24</div>");
jq("#yunnan").TitleShow("<div class='mapDiv'>地图热点效果25</div>");
jq("#shaanxi").TitleShow("<div class='mapDiv'>地图热点效果26</div>");
jq("#gansu").TitleShow("<div class='mapDiv'>地图热点效果27</div>");
jq("#qinghai").TitleShow("<div class='mapDiv'>地图热点效果28</div>");
jq("#ningxia").TitleShow("<div class='mapDiv'>宁夏地图热点效果29</div>");
jq("#xinjiang").TitleShow("<div class='mapDiv'>新疆地图热点效果30</div>");
jq("#xizang").TitleShow("<div class='mapDiv'>地图热点效果31</div>");
jq("#xianggang").TitleShow("<div class='mapDiv'>香港地图热点效果32</div>");
jq("#aomen").TitleShow("<div class='mapDiv'>地图热点效果33</div>");
jq("#taiwan").TitleShow("<div class='mapDiv'>地图热点效果34</div>");
});
</script>
<!--热点HTML代码开始 -->
<div class="map">
<img border="0" usemap="#Map" src="map.png" />
<map name="Map" id="Map">
<area id="beijing" alt="北京" href="#" coords="354,140,380,153" shape="rect">
<area id="shanghai" alt="上海" href="#" coords="434,246,462,259" shape="rect">
<area id="tianjin" alt="天津" href="#" coords="382,168,408,180" shape="rect">
<area id="chongqing" alt="重庆" href="#" coords="294,264,320,276" shape="rect">
<area id="hebei" alt="河北" href="#" coords="347,174,374,186" shape="rect">
<area id="shanxi" alt="山西" href="#" coords="322,186,348,198" shape="rect">
<area id="neimenggu" alt="内蒙古" href="#" coords="349,110,388,124" shape="rect">
<area id="liaoning" alt="辽宁" href="#" coords="406,128,432,140" shape="rect">
<area id="jilin" alt="吉林" href="#" coords="427,101,454,115" shape="rect">
<area id="heilongjiang" alt="黑龙江" href="#" coords="424,58,464,73" shape="rect">
<area id="jiangsu" alt="江苏" href="#" coords="404,224,417,250" shape="rect">
<area id="zhejiang" alt="浙江" href="#" coords="413,265,427,291" shape="rect">
<area id="anhui" alt="安徽" href="#" coords="382,236,395,263" shape="rect">
<area id="fujian" alt="福建" href="#" coords="399,300,413,327" shape="rect">
<area id="jiangxi" alt="江西" href="#" coords="371,286,385,313" shape="rect">
<area id="shandong" alt="山东" href="#" coords="373,196,399,208" shape="rect">
<area id="henan" alt="河南" href="#" coords="337,228,364,239" shape="rect">
<area id="hubei" alt="湖北" href="#" coords="329,258,356,271" shape="rect">
<area id="hunan" alt="湖南" href="#" coords="325,294,352,306" shape="rect">
<area id="guangdong" alt="广东" href="#" coords="356,343,382,355" shape="rect">
<area id="guangxi" alt="广西" href="#" coords="302,343,328,355" shape="rect">
<area id="hainan" alt="海南" href="#" coords="313,398,340,411" shape="rect">
<area id="sichuan" alt="四川" href="#" coords="239,265,265,277" shape="rect">
<area id="guizhou" alt="贵州" href="#" coords="283,311,308,324" shape="rect">
<area id="yunnan" alt="云南" href="#" coords="225,337,251,349" shape="rect">
<area id="shaanxi" alt="陕西" href="#" coords="303,224,316,251" shape="rect">
<area id="gansu" alt="甘肃" href="#" coords="179,156,205,168" shape="rect">
<area id="qinghai" alt="青海" href="#" coords="174,206,200,218" shape="rect">
<area id="ningxia" alt="宁夏" href="#" coords="277,188,290,212" shape="rect">
<area id="xinjiang" alt="新疆" href="#" coords="85,140,111,152" shape="rect">
<area id="xizang" alt="西藏" href="#" coords="87,249,113,261" shape="rect">
<area id="xianggang" alt="香港" href="#" coords="379,358,406,370" shape="rect">
<area id="aomen" alt="澳门" href="#" coords="349,371,375,383" shape="rect">
<area id="taiwan" alt="台湾" href="#" coords="434,322,448,348" shape="rect">
</map>
</div>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
日期 时间js控件
May 07 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
js微信分享API
Oct 11 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
javascript表单正则应用
Feb 04 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
jquery插件qrcode在线生成二维码
Apr 26 #Javascript
javascript函数式编程实例分析
Apr 25 #Javascript
javascript中eval函数用法分析
Apr 25 #Javascript
javascript属性访问表达式用法分析
Apr 25 #Javascript
javascript变量声明实例分析
Apr 25 #Javascript
javascript显式类型转换实例分析
Apr 25 #Javascript
javascript原始值和对象引用实例分析
Apr 25 #Javascript
You might like
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
python 写一个性能测试工具(一)
2020/10/24 Python
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
电子商务专业学生的学习自我评价
2013/10/27 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
空乘英文求职信
2014/04/13 职场文书
企业贷款委托书格式
2014/09/12 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
教师求职自荐信范文
2015/03/04 职场文书
工商行政处罚决定书
2015/06/24 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
swagger如何返回map字段注释
2021/07/03 Java/Android
gateway网关接口请求的校验方式
2021/07/15 Java/Android