这是一款效果炫酷的 jQuery 和 CSS3 翻页效果幻灯片插件。该插件使用了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。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!