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


Posted in Javascript onFebruary 12, 2014

如下所示:

<!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="JS/jquery-1.8.0.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('Images/dialge.gif') no-repeat;
            position: absolute;
            display: none;
            word-break: break-all;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("area").each(function () {
                var $x = -55;
                var $y = -80;
                var name = $(this).attr("alt");
                $(this).mouseover(function (e) {
                    var strall = [];
                    strall = $(this).attr("coords").split(",");
                    var x = parseInt(strall[0]);
                    var y = parseInt(strall[3]);
                    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({
                        left: (x + $x) + "px",
                        top: (y + $y) + "px"
                    }).show();
                }).mouseout(function () {
                    $(".mapDiv").remove();
                }).mousemove(function (e) {
                    $(".mapDiv").css({
                        left: (x + $x) + "px",
                        top: (y + $y) + "px"
                    })
                });
            });
            //first load
            show();
            //random
            setInterval(show, 3000); // 注意函数名没有引号和括弧 
        });

        function show() {
            var area = $("area");
            var random = getRandom(area.length);
            $(area[random]).trigger("mouseover");
        }
        function getRandom(n) { return Math.floor(Math.random() * n + 1) }
    </script>
</head>
<body>
    <div class="map">
        <img border="0" usemap="#Map" src="images/1544302yufceen0c3nbjzu.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>
Javascript 相关文章推荐
Dom与浏览器兼容性说明
Oct 25 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 #Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 #Javascript
jquery绑定事件不生效的解决方法
Feb 11 #Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 #Javascript
JS创建自定义表格具体实现
Feb 11 #Javascript
js实现div的切换特效上一个下一个
Feb 11 #Javascript
js中文逗号转英文实现
Feb 11 #Javascript
You might like
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
提升PHP速度全攻略
2006/10/09 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
PHP 文件类型判断代码
2009/03/13 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Cpy和Python的效率对比
2015/03/20 Python
python3简单实现微信爬虫
2015/04/09 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
python正则表达式面试题解答
2020/04/28 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Django框架models使用group by详解
2020/03/11 Python
jupyter notebook 重装教程
2020/04/16 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
印尼旅游网站:via
2017/11/12 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
PHP面试题及答案一
2012/06/18 面试题
骨干教师培训感言
2014/01/16 职场文书
房产公证书范本
2014/04/10 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL