Tự động kích thước Bong bóng bật lên đơn giản
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="bubble.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="bubble.js"></script>
</head>
<body>
<br/><br/>
<div class="bubbleInfo">
<div class="bubble" title="Text 1">Set cursor</div>
</div>
<br/><br/><br/><br/>
<div class="bubbleInfo">
<div class="bubble" title="Text 2">Set cursor</div>
</div>
</body>
</html>
bubble.js
$(function () {
var i = 0;
var z=1;
do{
title = $('.bubble:eq('+i+')').attr('title');
if(!title){
z=0;
} else {
$('.bubble:eq('+i+')').after('<table style="opacity: 0; top: -50px; left: -33px; display: none;" 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>'+title+'</td><td class="right"></td></tr><tr><td class="corner" id="bottomleft"></td><td class="bottom"><img src="bubble/bubble-tail.png" height="25px" width="30px" /></td><td id="bottomright" class="corner"></td></tr></tbody></table>');
$('.bubble:eq('+i+')').removeAttr('title');
}
i++;
}while(z>0)
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 500;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $('.bubble', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: -40,
left: 10,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
bubble.css
/* Booble */
.bubbleInfo {
position: relative;
width: 500px;
}
.bubble {
}
.popup {
position: absolute;
display: none;
z-index: 50;
border-collapse: collapse;
font-size: .8em;
}
.popup td.corner {
height: 13px;
width: 15px;
}
.popup td#topleft {
background-image: url(bubble/bubble-1.png);
}
.popup td.top {
background-image: url(bubble/bubble-2.png);
}
.popup td#topright {
background-image: url(bubble/bubble-3.png);
}
.popup td.left {
background-image: url(bubble/bubble-4.png);
}
.popup td.right {
background-image: url(bubble/bubble-5.png);
}
.popup td#bottomleft {
background-image: url(bubble/bubble-6.png);
}
.popup td.bottom {
background-image: url(bubble/bubble-7.png);
text-align: center;
}
.popup td.bottom img {
display: block;
margin: 0 auto;
}
.popup td#bottomright {
background-image: url(bubble/bubble-8.png);
}