基于jQuery图片缩放tab切换效果特效代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是基于jQuery图片缩放tab切换效果特效代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于jQuery图片缩放tab切换效果</title>
<style type="text/css" media="screen">
body {
  background: #eee;
  font-size: 62.5%;
  font-family: helvetica, arial, sans-serif;
}

.zoomoutmenu {
  border: 0.5em solid #fff;
  position: relative;
  height: 23.5em;
  width: 50em;
  margin: 0 auto;
}

.panels {
  height: 23.5em;
  width: 50em;
  overflow: hidden;
}

.tabs {
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.tabs li {
  float: left;
  display: block;
  width: 10em;
  background-color: #fff;
  text-align: center;
}

.tabs li a {
  padding: 0.2em;
  display: block;
  text-decoration: none;
  color: #000;
  border-top: 5px solid #fff;
  font-size: 1.3em;
}

.tabs li a:hover {
  border-top: 5px solid #333;
  background-color: #666;
  color: #fff;
}

.panel {
  background: #ccc;
  padding: 1em;
  height: 21.5em;
  position: relative;
}

.panel h2 {
  font-size: 3em;
  color: #fff;
  font-family: Garamond, times, serif;
  padding: 1em;
  margin: 0;
  text-align: right;
}

#one {
  background: url(images/one.jpg) no-repeat center center;
}

#two {
  background: url(images/two.jpg) no-repeat center center;
}

#three {
  background: url(images/three.jpg) no-repeat center center;
}

#four {
  background: url(images/four.jpg) no-repeat center center;
}

#five {
  background: url(images/five.jpg) no-repeat center center;
}

</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
    $.fn.zoomtabs = function (zoomPercent, easing) {
        if (!zoomPercent) zoomPercent = 10;
        
        return this.each(function () {
            var $zoomtab = $(this);
            var $tabs = $zoomtab.find('.tabs');
            var height = $tabs.height();
            
            var panelIds = $tabs.find('a').map(function () {
                return this.hash;
            }).get().join(',');
            
            $zoomtab.find('> div').scrollTop(0);
            
            var $panels = $(panelIds);
            var images = [];
            
            $panels.each(function () {
                var $panel = $(this),
                    bg = ($panel.css('backgroundImage') || "").match(/url\s*\(["']*(.*?)['"]*\)/),
                    img = null;
                
                if (bg !== null && bg.length && bg.length > 0) {
                    bg = bg[1];
                    img = new Image();
                    
                    $panel.find('*').wrap('<div style="position: relative; z-index: 2;" />');                    
                    $panel.css('backgroundImage', 'none');
                    
                    $(img).load(function () {
                        var w = this.width / 10;
                        var wIn = w / 100 * zoomPercent;
                        var h = this.height / 10;
                        var hIn = h / 100 * zoomPercent;
                        var top = 0;
                        
                        var fullView = {
                            height: h + 'em',
                            width: w + 'em',
                            top: top,
                            left: 0
                        };
                                                
                        var zoomView = {
                            height: (h + hIn) + 'em',
                            width: (w + wIn) + 'em',
                            top: top,
                            left: '-' + (wIn / 2) + 'em'
                        };
                        
                        $(this).data('fullView', fullView).data('zoomView', zoomView).css(zoomView);

                    }).prependTo($panel).css({'position' : 'absolute', 'top' : 0, 'left' : 0 }).attr('src', bg);
                    
                    images.push(img);
                }
            });
            
            function zoomImages(zoomType, speed) {
                $(images).each(function () {
                    var $image = $(this);
                    if ($image.is(':visible')) {
                        $image.stop().animate($image.data(zoomType), speed, easing);
                    } else {
                        $image.css($image.data(zoomType), speed);
                    }
                });
            }
                        
            $tabs.height(0).hide(); // have to manually set the initial state to get it animate properly.
            
            // this causes opear to render the images with zero height and width for the hidden image
            // $panels.hide().filter(':first').show();
            var speed = 200;
            
            $zoomtab.hover(function () {
                // show and zoom out
                zoomImages('fullView', speed);
                $tabs.stop().animate({ height : height }, speed, easing);
            }, function () {
                // hide and zoom in
                zoomImages('zoomView', speed);
                $tabs.stop().animate({ height : 0 }, speed, easing, function () {
                  $tabs.hide();
                });
            });
            
            var hoverIntent = null;
            $tabs.find('a').hover(function () {
                clearTimeout(hoverIntent);
                var el = this;
                hoverIntent = setTimeout(function () {
                    $panels.hide().filter(el.hash).show();
                }, 100);
            }, function () {
                clearTimeout(hoverIntent);
            }).click(function () {
                return false;
            });
        });
    };

    $(function () {
        $('.zoomoutmenu').zoomtabs(15);
    });
</script>
</head>
<body>
  <div class="zoomoutmenu">
    <ul class="tabs">
        <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
        <li><a href="#four">Four</a></li>
        <li><a href="#five">Five</a></li>
    </ul>
    <div class="panels">
      <div id="one" class="panel">
        <h2>Garden life</h2>
      </div>
      <div id="two" class="panel">
        <h2>Lego</h2>
      </div>
      <div id="three" class="panel">
        <h2>Berlin</h2>
      </div>
      <div id="four" class="panel">
        <h2>New York</h2>
      </div>
      <div id="five" class="panel">
        <h2>Hungary</h2>
      </div>        
    </div>
  </div>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)