turn.js官网上的例子水本有小到大的展开
时间: 2024-04-16 09:28:58 浏览: 14
要实现 turn.js 官网上的例子中页面大小从小到大展开的效果,你可以使用 turn.js 提供的 `animation` 选项来控制页面的过渡效果。以下是一个示例:
```javascript
$(document).ready(function(){
var $book = $('#book');
// 初始化 turn.js 插件
$book.turn({
// turn.js 配置选项
width: '300px',
height: '200px',
autoCenter: true,
duration: 1000, // 过渡动画的持续时间
acceleration: true, // 使用硬件加速来提高动画性能
gradients: true // 使用渐变效果
});
// 监听 turn.js 的 "turned" 事件
$book.bind('turned', function(event, page, view) {
// 获取当前页的尺寸
var width = $(this).turn('size').width;
var height = $(this).turn('size').height;
// 设置下一页的尺寸
$(this).turn('size', width + 100, height + 50);
});
});
```
在上述示例中,我们首先通过`$('#book')`选择器获取包含 turn.js 插件的容器元素,并将其存储在 `$book` 变量中。然后,我们使用 `$book.turn()` 方法来初始化 turn.js 插件。
在配置选项中,我们设置了初始页面的宽度为 `300px`,高度为 `200px`,并启用了自动居中、持续时间为 `1000ms` 的过渡动画,以及硬件加速和渐变效果。
然后,我们使用 `$book.bind('turned', ...)` 方法监听 turn.js 的 "turned" 事件。每当页面翻转完成时,事件处理函数将被执行。
在事件处理函数中,我们使用 `$book.turn('size')` 方法获取当前页的尺寸,并将宽度和高度分别增加 100 和 50。然后,我们使用 `$book.turn('size', ...)` 方法来设置下一页的尺寸。
通过不断改变页面的尺寸,就可以实现页面大小从小到大展开的效果。
请注意,为了使该效果生效,你需要在 DOM 加载完成后执行这段代码,并确保选择器准确地匹配到包含 turn.js 插件的容器元素。