jQuery实现：模拟真实的照片翻页效果的相册

2009-10-20 08:54:11 | 【大中小】

点击上张照片或者下一张照片，照片的切换效果有图用手拿着一摞照片在看一样，非常逼真

在网页<head>区添加以下代码

<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
    
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>

在网页<body>区添加以下代码


<div class="container_12" id="wrapper">
      <div class="grid_8" id="content"><br /><br /><br /><br /><br /><br /><br />
       
        <!-- relevant for the tutorial - start -->
        <div class="grid_6 prefix_1 suffix_1" id="gallery">
          <div id="pictures">
            <img src="images/picture1.png" alt="" />
            <img src="images/picture2.png" alt="" />
            <img src="images/picture3.png" alt="" />
            <img src="images/picture4.png" alt="" />
            <img src="images/picture5.png" alt="" />
          </div>
          
          <div class="grid_3 alpha" id="prev">
            <a href="#previous">&laquo; Previous Picture</a>
          </div>
          <div class="grid_3 omega" id="next">
            <a href="#next">Next Picture &raquo;</a>
          </div>
        </div>
        <!-- relevant for the tutorial - end -->

        
        <div class="clear"></div> <p></p>

<p></p>
<p><p>可以上翻和下翻，模拟真实翻页的照片展示效果。</p></p>
<p></p>
        <div id="footer">
          (c) 2009 - <a href="http://thisblog.usejquery.com/">This Blog Use jQuery</a>
        </div>
      </div>
      
      <div class="grid_4" id="sidebar">
        <ul>
          <li>
            <h2>What's that?</h2>
            <p>
              This is a Demo Page for a tutorial from <a href="http://thisblog.usejquery.com/">This Blog Use jQuery</a>.
              If you come from somewhere else feel free to find out how this Demo works!
            </p>
          </li>
          <li>
            <h2>Pictures</h2>
            <p>
              The pictures are taken from <a href="http://www.flickr.com/search/?q=graffiti&l=5">Flickr</a> and they are under the
              Creative Commons Attribution-ShareAlike License.
            </p>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>

相关脚本和图片在压缩包内，请下载！

下载"jQuery实现：模拟真实的照片翻页效果的相册"

推荐给朋友

上一篇： jQuery+css3宝丽莱相片查看效果
下一篇： jQuery实现的 - 带耳朵的翻页展示效果

jQuery实现：模拟真实的照片翻页效果的相册

下载"jQuery实现：模拟真实的照片翻页效果的相册"

相关资源