VUE D2Admin中引用turn.js 实现翻书效果
1.把几个JS文件放到路径…\public文件夹下 2.框架的html页面引用几个Js(…\public\index.html)<script src="./extras/jquery.min.1.7.js"></script><script src="./extras/modernizr.2.5.
·
1.把几个JS文件放到路径…\public文件夹下
2.框架的html页面引用几个Js(…\public\index.html)
<script src="./extras/jquery.min.1.7.js"></script>
<script src="./extras/modernizr.2.5.3.min.js"></script>
<script src="./extras/turn.min.js"></script>
<script src="./extras/turn.html4.min.js"></script>
<script src="./extras/scissor.min.js"></script>
3.所需要显示的组件内写代码
<template>
<d2-container>
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
</div>
</d2-container>
</template>
<script>
export default {
name: 'test',
methods:{
}
}
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Width
width:922,
// Height
height:600,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// Load the HTML4 version if there's not CSS transform
yepnope({
test : Modernizr.csstransforms,
yep: ['extras/turn.js'],//引用的是public下的文件
nope: ['extras/turn.html4.min.js'],
both: ['extras/basic.css'],
complete: loadApp
});
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)