[JavaScript知识库]基于turn.js实现的书本翻页效果(vue)

基于turn.js实现的书本翻页效果

• vue 项目搭建 vue cli4

• vue引入turn.js

引入jQuery

npm nistall jquery --save

vue.config.js文件

const webpack = require("webpack");
module.exports = {
    configureWebpack: {
        //支持jquery
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery"
            })
        ]
    },
};

全局引入turn.js

• turn.js文件通过www.turnjs.com官网进行下载

import turn from '../assets/js/turn'

代码展示

<template>

  <div class="flipbook-viewport">
    <div class="container">
      <div class="flipbook">
        <div class="page1">
          <img :src="page1" alt="page1">
        </div>
        <div class="page2">
          <img :src="page2" alt="page1">
        </div>
        <div class="page3">
          <img :src="page3" alt="page1">
        </div>
        <div class="page4">
          <img :src="page4" alt="page1">
        </div>
        <div class="page5">
          <img :src="page5" alt="page1">
        </div>
        <div class="page6">
          <img :src="page6" alt="page1">
        </div>
        <div class="page7">
          <img :src="page7" alt="page1">
        </div>
        <div class="page8">
          <img :src="page8" alt="page1">
        </div>
        <div class="page9">
          <img :src="page9" alt="page1">
        </div>
        <div class="page10">
          <img :src="page10" alt="page1">
        </div>
        <div class="page11">
          <img :src="page11" alt="page1">
        </div>
        <div class="page12">
          <img :src="page12" alt="page1">
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import turn from '../assets/js/turn'
export default {
  name: "E-book",
  data() {
    return{
      page1: require('../assets/img/pages/1.jpg'),
      page2: require('../assets/img/pages/2.jpg'),
      page3: require('../assets/img/pages/3.jpg'),
      page4: require('../assets/img/pages/4.jpg'),
      page5: require('../assets/img/pages/5.jpg'),
      page6: require('../assets/img/pages/6.jpg'),
      page7: require('../assets/img/pages/7.jpg'),
      page8: require('../assets/img/pages/8.jpg'),
      page9: require('../assets/img/pages/9.jpg'),
      page10: require('../assets/img/pages/10.jpg'),
      page11: require('../assets/img/pages/11.jpg'),
      page12: require('../assets/img/pages/12.jpg'),
    }
  },
  mounted() {
    this.$nextTick(() => {
        // Create the flipbook
        $('.flipbook').turn({
          width:922,
          height:600,
          elevation: 50,
          gradients: true,
          autoCenter: true
        });
    });
  },
  methods: {},
  components: {}
};
</script>

<style scoped lang="less">
img{
  height: 600px;
  width: 461px;
}
.flipbook-viewport{
  background: url("../assets/img/bg.jpg") no-repeat;
  background-size:100% 100%;
}
</style>