这是一款效果炫酷的 jQueryCSS3 翻页效果幻灯片插件。该插件使用了jQuery来激活 CSS 3D transforms 来制作翻页特效,

HTML结构

HTML结构比较简单,div.content是可选的。

<div id="flipbook">
  <div class="slide">
    <img src="images/1.jpg" alt="" /> 
    <div class="content"><a href="#">Flowers: What you didn't know</a></div> 
  </div>
  <div class="slide">
    <img src="images/2.jpg" alt="" /> 
    <div class="content"><a href="#">Flowers: Real or Fiction?</a></div> 
  </div>
  <div class="slide">
    <img src="images/3.jpg" alt="" /> 
    <div class="content"><a href="#">A Flower ate my Baby!</a></div> 
  </div>
  <div class="slide">
    <img src="images/4.jpg" alt="" /> 
    <div class="content"><a href="#">Will Flowers Destroy Earth?</a></div>
  </div>
</div>
                

实际上我们没有使用图片,而是通过CSS来分割它们。你看到的图片实际上是隐藏的,然后用CSS将它们做成背景图片,以便我们操纵它们。

插件中使用了Modernizr来处理css 3D transforms,这样即使在IE8下也可以看到效果。

JAVASCRIPT

在引入jQuery和jquery.pictureflip.js文件后,可以如下调用插件:

<script type="text/javascript">
  $(document).ready(function() {
    $('#flipbook').pageFlip({
      time : 2,
      shadow : false,
      slideTime: 0.3,
      autoRun: true,
      autoTime: 4
    });
  });
</script>
                

也可以使用默认参数:

<script type="text/javascript">
  $(document).ready(function() {
    $('#flipbook').pageFlip();
  });
</script>
                

可用参数:

该翻页效果有一些参数可以使用:

  • time :翻页动画的时间,单位为秒,默认值为1秒。
  • shadow :是否开启翻页动画时的阴影效果,可以设置为true或false,默认值为true。(可能会引起一些性能问题)
  • slideTime :标题滑块升起的时间。默认值为0.1秒。
  • autorun :是否自动播放幻灯片。默认值为false。
  • autoTime :设置自动播放幻灯片时的图片切换时间。默认值为5秒。你可以设置它为false。