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 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
fromCharCode和charCodeAt 方法
Dec 27 Javascript
javascript 学习之旅 (1)
Feb 05 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
js实现简单扫雷
Nov 27 Javascript
利用js实现简单开关灯代码
Nov 23 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+DBM的同学录程序(1)
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
js实现返回顶部效果
2017/03/10 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
超简单使用Python换脸实例
2019/03/27 Python
使用Python实现画一个中国地图
2019/11/23 Python
python 弧度与角度互转实例
2020/04/15 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
Python面向对象实现方法总结
2020/08/12 Python
python实现画图工具
2020/08/27 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
餐厅销售主管职责范本
2014/02/19 职场文书
环保建议书作文
2014/03/12 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
导师对论文的学术评语
2015/01/04 职场文书
趣味运动会开幕词
2015/01/28 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
如何做好工作总结!
2019/04/10 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书