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

本文实例讲述了jQuery实现鼠标经过弹出提示信息的地图热点效果。分享给大家供大家参考。具体如下：

这里的jQuery鼠标经过弹出提示信息地图热点效果，很多网站上有用到，送给大家，对作者表示感谢。

运行效果截图如下：

具体代码如下：

jQuery地图热点效果-鼠标经过弹出提示信息

.map img { width:496px; height: 415px; }

.mapDiv { width:140px; height:61px; padding: 5px; color:#369; background: url('//img.jbzj.com/file_images/article/201508/201587110632401.gif') no-repeat; position:absolute; display: none; word-break:break-all; }

$(document).ready(function(){

$("area").each(function(){

var $x=-70;

var $y=-80;

var name=$(this).attr("alt");

$(this).mouseover(function(e){

var index_num=$(this).index();

var dom="

提示消息

";

$("body").append(dom);

$(".name").text(name);

$(".num").text(index_num)

$(".mapDiv").css({

top: (e.pageY + $y)+"px",

left: (e.pageX + $x)+"px"

}).show("fast");

}).mouseout(function(){

$(".mapDiv").remove();

}).mousemove(function(e){

$(".mapDiv").css({

top: (e.pageY + $y)+"px",

left: (e.pageX + $x)+"px"

})

});

});

})

希望本文所述对大家的jquery程序设计有所帮助。