vue2.xturn.js 本をめくる効果を実現するにはどうすればよいですか?以下の記事では、vue2.x でturn.js を使用して本をめくる効果を実現する方法を紹介しますので、ご参考になれば幸いです。
エフェクトのプレビュー:
公式 Web サイトのソース コードのダウンロード: http://turnjs.com/
ファイル lib/turn.js
# を見つけます
##新しく作成した utils ファイルに入れます Turn.js は jquery を使用して書かれています。vue を使用する場合は jquery を導入する必要がありますnpm install --save jquery
const webpack = require('webpack') module.exports = { chainWebpack: config => { //引入ProvidePlugin config.plugin("provide").use(webpack.ProvidePlugin, [{ $: "jquery", jquery: "jquery", jQuery: "jquery", "window.jQuery": "jquery", }, ]); }, }
#vue ファイル コンテンツを使用する
<template> <div> <div> <div id="flipbook"> <div v-for="(item) in imgUrl" :key="item.index" :style="` background:url(${item.imgurl}) no-repeat 100% 100% `" > </div> </div> </div> </div> </template> <script> //turn.js import turn from '../utils/turn.js' export default { name: 'Home', data(){ return{ imgUrl:[ {imgurl:'image/1.jpg',index:1}, {imgurl:'image/2.jpg',index:2}, {imgurl:'image/3.jpg',index:3}, {imgurl:'image/4.jpg',index:4}, {imgurl:'image/5.jpg',index:5}, {imgurl:'image/6.jpg',index:6}, {imgurl:'image/7.jpg',index:7}, {imgurl:'image/8.jpg',index:8}, {imgurl:'image/9.jpg',index:9}, {imgurl:'image/10.jpg',index:10}, {imgurl:'image/11.jpg',index:11}, {imgurl:'image/12.jpg',index:12}, ] } }, methods:{ onTurn(){ this.$nextTick(()=>{ $("#flipbook").turn({ autoCenter: true, height:646, width:996, }); }) } }, mounted(){ this.onTurn(); } } </script> <style> *{ margin: 0; padding: 0; } .home{ width: 100vw; height: 100vh; .turnClass{ display: flex; margin: 0px auto; width: 996px; height: 646px; padding: calc((100vh - 646px)/2) 0; overflow: hidden; } } </style>
エフェクト画像:
[関連する推奨事項:
vue.js チュートリアル以上がvue2.x +turn.js がどのようにして本のめくり効果を実現するかについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。