Xem thử

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}

.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}
* { margin:0; padding:0;}
#iframe_b { width:960px; height:120px; overflow:hidden; background:#fff;}
#iframe_b .top { background:url(images/bg_top.gif) no-repeat; width:960px; height:10px; overflow:hidden;}
#iframe_b .bottom { background:url(images/bg_bottom.gif) repeat; width:960px; height:10px; overflow:hidden;}
#orbs { height:100px; margin-left:38px;}
#orbs li{
width:127px; /*width of image container. Should be wider than contained images (before bubbling) */
height:100px; /*height of image container. Should be taller than contained images (before bubbling) */
}
#orbs li img{
width:100px; /*width of each image before bubbling*/
height:74px; /*height of each image*/
margin-top:12px;
-ms-interpolation-mode:bicubic;
}
</style>
<script type="text/javascript">
/*Image Bubbles Effect (April 4th, 2010)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

jQuery.fn.imgbubbles=function(options){
var $=jQuery

var setting=$.extend({}, {factor:2, speed:'fast'}, options) //merge options w/ default settings
return this.each(function(){ //return jQuery obj
var $bubblewrap=$(this)
var $imgs=$bubblewrap.find('li img')
$imgs.each(function(){
var $img=$(this)
var $parentli=$img.offsetParent()
var od={width:this.offsetWidth, height:this.offsetHeight} //original dimensions of image
var nd={width:od.width*setting.factor, height:od.height*setting.factor} //enlarged dimensions of image
var ncoords=[-(nd.width-od.width)/2, -(nd.height-od.height)/2] //coords to move enlarged image to
$img.data("specs", { //cache image specs
od: od,
nd: nd,
ncoords: ncoords
})
if ($img.attr('alt')){ //if tooltip for image defined
var $tip=$('<div class="tooltip" style="z-index:1001" />').html($img.attr('alt')).css('visibility', 'hidden').appendTo($img.offsetParent())
var tipd={width:$tip.outerWidth(), height:$tip.outerHeight()} //tip dimensions
$tip.data("specs", {
d: tipd,
ocoords: [ncoords[0]-tipd.width/2+nd.width/2, ncoords[1]-tipd.height/2], //resting tip coords
ncoords: [-tipd.width/2+od.width/2, -tipd.height] //tip coords to animate to
})
$img.data('$tip', $tip)
}
})

$bubblewrap.mouseover(function(e){
if (e.target.tagName=="IMG"){
var $img=$(e.target), $tip=$img.data('$tip')
var imgspecs=$img.data('specs')
var ncoords=imgspecs.ncoords
var od=imgspecs.od
var nd=imgspecs.nd
$img.stop().css('zIndex', 1000).animate({left:ncoords[0], top:ncoords[1], width:nd.width, height:nd.height}, setting.speed) //animate image
if ($img.attr('alt')){
var tipspecs=$tip.data("specs")
$tip.css({zIndex:1000, visibility:'visible', left:-tipspecs.d.width/2+od.width/2, top:-tipspecs.d.height})
.animate({left:ncoords[0]-tipspecs.d.width/2+nd.width/2, top:ncoords[1]-tipspecs.d.height}, setting.speed) //animate tip
}
}
})

$bubblewrap.mouseout(function(e){
if (e.target.tagName=="IMG"){
var $img=$(e.target), $tip=$img.data('$tip')
var imgspecs=$img.data('specs')
var od=imgspecs.od
var nd=imgspecs.nd
$img.stop().css('zIndex', 999).animate({left:0, top:0, width:od.width, height:od.height}, setting.speed) //animate image
if ($img.attr('alt')){
var tipspecs=$tip.data("specs")
$tip.css({zIndex:999, visibility:'hidden'}) //hide tip
}
}
})

})
}
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.5}) //add bubbles effect to UL id="orbs"
})
</script>
<div id="iframe_b">
<div class="top"></div>
<ul id="orbs" class="bubblewrap">
<li><a target="_blank" href="http://code1k.com"><img src="http://static.123mua.com.vn/iframe/html/20100826/images/01.gif?v2109" alt="" /></a></li>
<li><a target="_blank" href="http://code1k.com"><img src="http://static.123mua.com.vn/iframe/html/20100826/images/02.gif?v2109" alt="" /></a></li>
<li><a target="_blank" href="http://code1k.com"><img src="http://static.123mua.com.vn/iframe/html/20100826/images/03.gif?v2109" alt="" /></a></li>
<li><a target="_blank" href="http://code1k.com"><img src="http://static.123mua.com.vn/iframe/html/20100826/images/04.gif?v2109" alt="" /></a></li>
<li><a target="_blank" href="http://code1k.com"><img src="http://static.123mua.com.vn/iframe/html/20100826/images/05.gif?v2109" alt="" /></a></li>
<li><a target="_blank" href="http://code1k.com"><img src="http://static.123mua.com.vn/iframe/html/20100826/images/06.gif?v2109" alt="" /></a></li>
<li><a target="_blank" href="http://code1k.com"><img src="http://static.123mua.com.vn/iframe/html/20100826/images/07.gif?v2109" alt="" /></a></li>
</ul>
<div class="bottom"></div>
</div>