【JQ】鼠标经过一组button，弹出各自的气泡图片

HTML

<div id="bubble1" class="bubble"><img src="../image/p_bubble1.png" /></div><div id="bb1" class="bb"></div>
<div id="bubble2" class="bubble"><img src="../image/p_bubble2.png" /></div><div id="bb2" class="bb"></div>
<div id="bubble3" class="bubble"><img src="../image/p_bubble3.png" /></div><div id="bb3" class="bb"></div>

以上的id序号，能够由数据库里的ID列绑定。比方id="bubble<%# Eval("news_ID") %>"。次序不顺也能够。bb是button。

 

CSS

.bubble{position:absolute; width:0px; height:0px; opacity:0;}
     .bubble img{width:0px; opacity:0;}
#bubble1 {top:210px; right:122px; } #bubble2 {top:282px; right:202px;} #bubble3 {top:352px; right:281px;}
.bb{position:absolute; width:82px; height:30px; cursor:pointer; z-index:2;}
#bb1{top:210px; right:81px;}#bb2{top:282px; right:161px;}#bb3{top:352px; right:240px;}

这里是把button位置任意分布，气泡位置在其上方。初始时尺寸为0，而且透明。

 

JS

$(window).load(function () {
      var Len = $(".bb").length; //总数
       var idArr = []; //buttonid组
       var tArr = []; //气泡top组
       var rArr = []; //气泡right组
       for (i = 0; i < Len; i++) {
            idArr[i] = $(".bb:eq(" + i + ")").attr("id").slice(2);
            tArr[i] = parseInt($(".bubble:eq(" + i + ")").css("top"));
            rArr[i] = parseInt($(".bubble:eq(" + i + ")").css("right"));
      }
      var n; //当前序号
       var w = 224;//气泡宽
       var h = 190;//气泡高
       $(".bb").mouseenter(function () {
             n = $(this).index(".bb"); //获取当前button序号
               $("#bubble" + idArr[n] + ",#bubble" + idArr[n] + " img").stop(true).animate({
                    width: w, height: h, top: tArr[n] - h, right: rArr[n] - w / 2, opacity:1
             });
       }).mouseleave(function () {
             $("#bubble" + idArr[n] + ",#bubble" + idArr[n] + " img").stop(true).animate({
                    width: 0, height: 0, top: tArr[n], right: rArr[n], opacity: 0
             });
       });
});

用$(window).load而不用$(document).ready是考虑到可能是由数据库里读取的。