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

来源：互联网发布：php post请求接口编辑：程序博客网时间：2024/04/30 17:51

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是按钮。

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;}

这里是把按钮位置随意分布，气泡位置在其上方，初始时尺寸为0，并且透明。

$(window).load(function () {      var Len = $(".bb").length; //总数       var idArr = []; //按钮id组       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"); //获取当前按钮序号               $("#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是考虑到可能是由数据库里读取的。

0 0