Zoomer Gallery 類似 Flash 放大效果的圖片特效

Zoomer Gallery 建立類似 Flash 的圖片放大效果，可以讓你網站上的圖片在使用者滑鼠滑過的時候，開啟啟動動畫效果去除邊框慢慢放大並且顯示出標題文字，看起的效果就跟 Flash 做出來的沒有兩樣。Zoomer Gallery 使用 jQuery 框架撰寫，支援 IE7+、Google Chrome、Apple Safari 等等的近代瀏覽器。

使用方法：
第一步 載入 Zoomer Gallery 需要用到的 JavaScript 檔
<!--使用 Google AJAX API 取得 jQuery 框架 1.8.2 的 min 版本-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Zoomer Gallery 的主程式碼 -->
<script type="text/javascript" src="zoomer.js"></script>

第二步 使用 HTML 製作圖片的列表
<div id="page">
  <br><br><br>
  <div id="content">
<div class="container">
 <ul class="thumb">
        <li><a href="#"><img src="robots.jpg" alt="Robots like cameras" /></a></li>
        <li><a href="#"><img src="monster.jpg" alt="Monsters!" /></a></li>
        <li><a href="#"><img src="santa.jpg" alt="Santa down under" /></a></li>
        <li><a href="#"><img src="thumb6.jpg" alt="Sponguebob!" /></a></li>
        <li><a href="#"><img src="thumb7.jpg" alt="Star Wars" /></a></li>
        <li><a href="#"><img src="hulk.jpg" alt="Hulk Smash!" /></a></li>
        <li><a href="#"><img src="dino.png" alt="Dinosaur time" /></a></li>
        <li><a href="#"><img src="orange.jpg" alt="Orange car" /></a></li>
        <li><a href="#"><img src="alien.jpg" alt="Aliens!" /></a></li>
        <li><a href="#"><img src="supe.jpg" alt="It's Superman!" /></a></li>
        <li><a href="#"><img src="garfield.jpg" alt="Where's my lasagne?" /></a></li>
        <li><a href="#"><img src="bridge.jpg" alt="The bridge at Sunset" /></a></li>
        <li><a href="#"><img src="peanuts.jpg" alt="Peanuts!" /></a></li>
        <li><a href="#"><img src="thumb5.jpg" alt="1956 Yellow Car" /></a></li>
        <li><a href="#"><img src="thumb4.jpg" alt="Ooooh. Pretty" /></a></li>
        <li><a href="#"><img src="thumb3.jpg" alt="Lets build something" /></a></li>
        <li><a href="#"><img src="thumb2.jpg" alt="Puppy love" /></a></li>
        <li><a href="#"><img src="thumb1.jpg" alt="It's a Toy Story" /></a></li>
 </ul>
</div>
  </div>
</div>

第三步 為圖片列表做簡單的 CSS 樣式設計
body {
font: Arial, Helvetica, sans-serif normal 10px;
margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
#page{
margin:0 auto;
position:relative;
width:850px;
font-family:verdana;
font-size:12px;
}
#content{
width:100%;
}
ul.thumb {float: left;list-style: none;margin: 0; padding: 10px;width: 800px;background-color: white;}
ul.thumb li {margin: 0; padding: 5px;float: left;position: relative;width: 110px;height: 110px;}
ul.thumb li img {width: 100px; height: 100px;border: 1px solid #ddd;padding: 5px;background: #f0f0f0;position: absolute;left: 0; top: 0;-ms-interpolation-mode: bicubic; }
ul.thumb li img.hover {margin-top:15px;background:url(thumb_bg.png) no-repeat center center;border: none;}
.title{position:absolute;width:185px;height:35px;margin:0;font-weight:900;background:url(blue.png) no-repeat center center;padding:17px 0 0 0;text-align:center; color: #fff; }

第四步 使用 JavaScript 程式片段讓 Zoomer Gallery 初始化
$(function(){
   $('ul.thumb li').Zoomer({
speedView:200,   // 圖片放大的速度以毫秒為單位
speedRemove:400, // 圖片縮小的速度以毫秒為單位
altAnim:true,    // 是否要有標題動畫
speedTitle:400,  // 標題顯示的速度以毫秒為單位
debug:false      // 除錯模式
  });
});

作者網站：http://www.addyosmani.com
檔案大小：319 KB
檔案下載：http://www.addyosmani.com/resources/zoomer/zoomer.for.jquery-1.0.zip
檔案備份：下載