如下： 複製程式碼 程式碼如下: Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例 <br> .map img<br> {<br> width: 496px;<br> height: 415px;<br> }<br> .mapDiv<br> {<br> width: 140px;<br> height: 61px;<br> padding: 5px;<br> color: #369;<br> background: url('Images/dialge.gif') no-repeat;<br> position: absolute;<br> display: none;<br> word-break: break-all;<br> }<br> <br> $(document).ready(function () {<br> $("area").each(function () {<br> var $x = -55;<br> var $y = -80;<br> var name = $(this).attr("alt");<br> $(this).mouseover(function (e) {<br> var strall = [];<br> strall = $(this).attr("coords").split(",");<br> var x = parseInt(strall[0]);<br> var y = parseInt(strall[3]);<br> var index_num = $(this).index();<br> var dom = "<div class='mapDiv'><p>提示消息<span class='name'></span><span class='num'></span></p></div>";<br> $("body").append(dom);<br> $(".name").text(name);<br> $(".num").text(index_num)<br> $(".mapDiv").css({<br> left: (x + $x) + "px",<br> top: (y + $y) + "px" <p> }).show();<br> }).mouseout(function () {<br> $(".mapDiv").remove();<br> }).mousemove(function (e) {<br> $(".mapDiv").css({<br> left: (x + $x) + "px",<br> top: (y + $y) + "px"<br> })<br> });<br> });<br> //first load<br> show();<br> //random<br> setInterval(show, 3000); // 注意函数名没有引号和括弧 <br> });</p> <p><br> function show() {<br> var area = $("area");<br> var random = getRandom(area.length);<br> $(area[random]).trigger("mouseover");<br> }</p> <p> function getRandom(n) { return Math.floor(Math.random() * n 1) }<br> ="forum.php?gid=27" coords="179,156,205,168" shape="rect"> " href="forum.php?gid=31" coords="87,249,113,261" shape="rect"> 349,377037,377g; >
