jQuery图标导航插件imgbubbles特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图标导航插件imgbubbles特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(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" />
<title>jQuery图标导航插件imgbubbles</title>
<script type="text/javascript" src="jquery.min.js"></script>
<link href="imgbubbles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="imgbubbles.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
	$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
	$('ul#squares').imgbubbles({factor:2.5,speed:1500}) //add bubbles effect to UL id="squares"
})
</script>
</head>
<body>
<center>
<h4>1.75x magnification</h4>
<ul id="orbs" class="bubblewrap">
<li><a href="#"><img src="stumbleupon.png" alt="Add to Stumbleupon" /></a></li>
<li><a href="#"><img src="facebook.png" alt="Add to Facebook" /></a></li>
<li><a href="#"><img src="digg.png" alt="Add to Digg" /></a></li>
<li><a href="#"><img src="twitter.png" alt="Add to Twitter" /></a></li>
<li><a href="#"><img src="rss.png" alt="Add RSS Feed" /></a></li>
</ul>
<h4>2.5x magnification</h4>
<ul id="squares" class="bubblewrap">
<li><a href="#"><img src="stumbleupon.png" alt="Add to Stumbleupon" /></a></li>
<li><a href="#"><img src="facebook.png" alt="Add to Facebook" /></a></li>
<li><a href="#"><img src="digg.png" alt="Add to Digg" /></a></li>
<li><a href="#"><img src="twitter.png" alt="Add to Twitter" /></a></li>
<li><a href="#"><img src="rss.png" alt="Add RSS Feed" /></a></li>
</ul>
</center>
</body>
</html>

JS代码(imgbubbles.js):

jQuery.fn.imgbubbles=function(options){
	var $=jQueryvar setting=$.extend({
}
,{
	factor:2,speed:'fast'}
,options) //merge options w/ default settingsreturn this.each(function(){
	//return jQuery objvar $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 imagevar nd={
	width:od.width*setting.factor,height:od.height*setting.factor}
//enlarged dimensions of imagevar ncoords=[-(nd.width-od.width)/2,-(nd.height-od.height)/2] //coords to move enlarged image to$img.data("specs",{
	//cache image specsod:od,nd:nd,ncoords:ncoords}
)if ($img.attr('alt')){
	//if tooltip for image definedvar $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 coordsncoords:[-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.ncoordsvar od=imgspecs.odvar nd=imgspecs.nd$img.stop().css('zIndex',1000).animate({
	left:ncoords[0],top:ncoords[1],width:nd.width,height:nd.height}
,setting.speed) //animate imageif ($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.odvar nd=imgspecs.nd$img.stop().css('zIndex',999).animate({
	left:0,top:0,width:od.width,height:od.height}
,setting.speed) //animate imageif ($img.attr('alt')){
	var tipspecs=$tip.data("specs")$tip.css({
	zIndex:999,visibility:'hidden'}
) //hide tip}
}
}
)}
)}

CSS代码(imgbubbles.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;}

附件:下载该文件资源,减少时间成本(增值服务)