我正在尝试在网页上添加一个弹出鼠标悬浮在特定文本上的气泡，它可以在滚动的div中运行（气泡正在被div的边缘切割）。 这是一个代码（实际的示例页面可以在 http://rktek.sytes.net/index3.php）：
This JS
$(document).ready(function () {
$(".bubbleInfo").each(function () {
// options
var distance = 20; var time = 250; var hideDelay = 500; var hideDelayTimer = null;
// tracker
var beingShown = false; var shown = false;
var trigger = $('.trigger', this); var popup = $('.popup', this).css('opacity', 0);
// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;
// reset position of popup box
popup.css({ top: -100, left: -3, display: 'block' })// brings the popup back in to view
// (we're using chaining on the popup) now animate it's opacity and position
.animate({ top: '-=' + distance + 'px', opacity: 1 }, time, 'swing', function() {
// once the animation is complete, set the tracker variables
beingShown = false; shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
top: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity alone doesn't do the job)
popup.css('display', 'none');
});
}, hideDelay); }); }); });
这是一个CSS样式
* {margin: 0; padding: 0;}
body { padding: 10px; }
h1 { margin: 14px 0; font-family: 'Trebuchet MS', Helvetica; }
p { margin: 14px 0; font-family: 'Trebuchet MS', Helvetica; }
.bubbleInfo { position: relative; }
/* Bubble pop-up */
.popup { position: absolute; display: none; z-index: 50; border-collapse: collapse; }
.popup td.corner { height: 15px; width: 19px; }
.popup td#topleft { background-image: url(images/bubble-1.png); }
.popup td.top { background-image: url(images/bubble-2.png); }
.popup td#topright { background-image: url(images/bubble-3.png); }
.popup td.left { background-image: url(images/bubble-4.png); }
.popup td.right { background-image: url(images/bubble-5.png); }
.popup td#bottomleft { background-image: url(images/bubble-6.png); }
.popup td.bottom { background-image: url(images/bubble-7.png); text-align: center;}
.popup td.bottom img { display: block; margin: 0 auto; }
.popup td#bottomright { background-image: url(images/bubble-8.png); }
.popup table.popup-contents { font-size: 12px; line-height: 1.2em; background-color:#fff; color: #666; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;}
table.popup-contents th { text-align: right; text-transform: lowercase; }
table.popup-contents td { text-align: left; }
#main1 {overflow-y: scroll; width: 600px; height: 400px;}
这是一个HTML
<p> some text before scrolled div</p> <p> some text before scrolled div</p> <p> some text before scrolled div</p>
<div id="main1">
<p> some text </p>
<div class="bubbleInfo">
<div>
<span class="trigger" > this to be bubbled </span>
</div>
<table id="dpop" class="popup">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>
<tr>
<td class="left"></td>
<td><table class="popup-contents">
<tbody>
<tr> <th> </th> <td>This is a bubble </td> </tr>
<tr> <th> </th> <td>This is a bubble </td> </tr>
<tr> <th> </th> <td>This is a bubble </td> </tr>
<tr> <th> </th> <td>This is a bubble </td> </tr>
</tbody></table>
</td>
<td class="right"></td>
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"><img width="30" height="29" alt="popup tail" src="http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png"/></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>
<br/>
<span class='bubbleInfo'>
<span id='download3' class="trigger"> testing with span </span>
<table id="dpop" class="popup">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>
<tr>
<td class="left"></td>
<td><table class="popup-contents">
<tbody>
<tr> <th>File:</th> <td>coda 1.1.zip</td> </tr>
<tr> <th>Date:</th> <td>11/30/07</td> </tr>
<tr> <th>Size:</th> <td>17 MB</td> </tr>
<tr> <th>Req:</th> <td>Mac OS X 10.4+</td> </tr>
<tr id="release-notes"> <th>Read the release notes:</th>
<td><a title="Read the release notes" href="./releasenotes.html">release notes</a></td>
</tr>
</tbody></table>
</td>
<td class="right"></td>
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"><img width="30" height="29" alt="popup tail" src="http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png"/></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</span>
</div>
非常感谢