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="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" />
</div>
</body>
</html>
相关文章
今天整理了33个使用jQuery与CSS3实现绚丽的鼠标悬停效果，有些是纯CSS3的，这些效果你完全可以用在你的网页上，让网站获得更好的体验2014-12-12
基于jquery的3d效果实现代码，需要的朋友可以参考下。2011-03-03
这篇文章主要介绍了Laravel整合Bootstrap 4的完整方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-01-01
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
本文为大家介绍下将DIV的滚动条滚动到其子元素所在的位置，方便自动定位,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery.Ajax()的data参数类型详解,需要的朋友可以参考下2017-07-07
常用的jquery模板插件——jQuery Boilerplate介绍
Query Boilerplate是一个不错的jQuery插件开发工具，使用这个工具可以帮助你快速的构建一个jQuery框架。这个工具提供你很多评论用以帮助你使得开发变得简单和直接，它是个真正的面对对象的工具，你可以实现公开或者私有的方法或者公开或者私有的属性。2014-09-09
这篇文章介绍了jquery设置控件位置的方法，有需要的朋友可以参考一下2013-08-08
Jquery和angularjs获取check框选中的值的方法汇总
本文分别通过具体的实例向大家展示了jquery和angularjs获取获取check框选中的值的方法，非常的简单实用，有需要的小伙伴可以参考下2016-01-01
将滚动的内容查询出来，放在一个div 或者别的容器里面，具体的实现代码如下2014-06-06
jquery全选checkBox功能实现代码(取消全选功能)
这篇文章主要介绍了jquery实现checkBox全选功能、取消全选功能，代码简单，大家可以直接参考使用2013-12-12
最新评论