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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
浅谈JS的原型和原型链
Jun 04 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
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
杏林同学录(六)
2006/10/09 PHP
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
php修改数组键名的方法示例
2017/04/15 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
深入浅析python继承问题
2016/05/29 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
python enumerate内置函数用法总结
2020/01/07 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
材料工程专业毕业生求职信
2014/03/04 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
学校食品安全责任书
2015/01/29 职场文书
关于童年的读书笔记
2015/06/26 职场文书