<template>
|
<div>
|
<div class="shade">
|
<div class="number"></div>
|
</div>
|
<div class="flipbook-viewport" style="display: none">
|
<div class="previousPage" style="display: none"></div>
|
<div class="nextPage"></div>
|
|
<div class="container">
|
<div class="flipbook"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data () {
|
//这里存放数据
|
return {
|
date_start: null,
|
date_end: null,
|
loading_img_url: [
|
require("../../../public/turnjs/image/1.png"),
|
require("../../../public/turnjs/image/2.png"),
|
require("../../../public/turnjs/image/3.png"),
|
require("../../../public/turnjs/image/4.png"),
|
require("../../../public/turnjs/image/5.png"),
|
require("../../../public/turnjs/image/6.png"),
|
require("../../../public/turnjs/image/7.png"),
|
require("../../../public/turnjs/image/8.png"),
|
require("../../../public/turnjs/image/9.png"),
|
require("../../../public/turnjs/image/10.png"),
|
require("../../../public/turnjs/image/11.png"),
|
require("../../../public/turnjs/image/12.png"),
|
require("../../../public/turnjs/image/13.png"),
|
require("../../../public/turnjs/image/14.png"),
|
require("../../../public/turnjs/image/15.png"),
|
require("../../../public/turnjs/image/16.png"),
|
require("../../../public/turnjs/image/17.png"),
|
require("../../../public/turnjs/image/18.png"),
|
require("../../../public/turnjs/image/19.png"),
|
require("../../../public/turnjs/image/20.png"),
|
require("../../../public/turnjs/image/21.png"),
|
require("../../../public/turnjs/image/22.png"),
|
require("../../../public/turnjs/image/23.png"),
|
require("../../../public/turnjs/image/24.png"),
|
require("../../../public/turnjs/image/25.png"),
|
require("../../../public/turnjs/image/26.png"),
|
require("../../../public/turnjs/image/27.png"),
|
require("../../../public/turnjs/image/28.png"),
|
],
|
};
|
},
|
//方法集合
|
methods: {
|
loading () {
|
var numbers = 0;
|
var length = this.loading_img_url.length;
|
for (var i = 0; i < 28; i++) {
|
var img = new Image();
|
img.src = loading_img_url[i];
|
img.onerror = function () {
|
numbers += (1 / length) * 100;
|
};
|
img.onload = function () {
|
numbers += (1 / length) * 100;
|
$(".number").html(parseInt(numbers) + "%");
|
// console.log(numbers);
|
if (Math.round(numbers) == 100) {
|
//$('.number').hide();
|
date_end = getNowFormatDate();
|
var loading_time = date_end - date_start;
|
//预加载图片
|
$(function progressbar () {
|
//拼接图片
|
$(".shade").hide();
|
var tagHtml = "";
|
for (var i = 1; i <= 28; i++) {
|
tagHtml +=
|
' <div style="background:url(image/' +
|
i +
|
'.png) no-repeat center;background-size:100% 100%"></div>';
|
}
|
$(".flipbook").append(tagHtml);
|
var w = $(".graph").width();
|
$(".flipbook-viewport").show();
|
});
|
//配置turn.js
|
function loadApp () {
|
var w = $(window).width();
|
var h = $(window).height();
|
// var w = "900px";
|
// var h = "600px";
|
$(".flipboox").width(w).height(h);
|
$(window).resize(function () {
|
w = $(window).width();
|
h = $(window).height();
|
// w = "900px";
|
// h = "600px";
|
$(".flipboox").width(w).height(h);
|
});
|
$(".flipbook").turn({
|
// Width
|
width: w,
|
// Height
|
height: h,
|
// Elevation
|
elevation: 50,
|
display: "single",
|
// Enable gradients
|
gradients: true,
|
// Auto center this flipbook
|
// autoCenter: true,
|
|
when: {
|
turning: function (e, page, view) {
|
var total = $(".flipbook").turn("pages"); //总页数
|
if (page !== 1) {
|
$(".previousPage").css("display", "block");
|
}
|
if (page == total) {
|
$(".nextPage").css("display", "none");
|
}
|
if (page !== total) {
|
$(".nextPage").css("display", "block");
|
}
|
},
|
turned: function (e, page, view) {
|
var total = $(".flipbook").turn("pages"); //总页数
|
if (page == 1) {
|
$(".previousPage").css("display", "none");
|
}
|
if (page == total) {
|
$(".nextPage").css("display", "none");
|
}
|
},
|
},
|
});
|
}
|
yepnope({
|
test: Modernizr.csstransforms,
|
yep: ["../../../public/turnjs/js/turn.js"],
|
complete: loadApp,
|
});
|
}
|
};
|
}
|
},
|
getNowFormatDate () {
|
var date = new Date();
|
var seperator1 = "";
|
var seperator2 = "";
|
var month = date.getMonth() + 1;
|
var strDate = date.getDate();
|
if (month >= 1 && month <= 9) {
|
month = "0" + month;
|
}
|
if (strDate >= 0 && strDate <= 9) {
|
strDate = "0" + strDate;
|
}
|
var currentdate =
|
date.getFullYear() +
|
seperator1 +
|
month +
|
seperator1 +
|
strDate +
|
"" +
|
date.getHours() +
|
seperator2 +
|
date.getMinutes() +
|
seperator2 +
|
date.getSeconds();
|
return currentdate;
|
},
|
},
|
mounted () {
|
this.loading();
|
this.date_start = this.getNowFormatDate();
|
},
|
};
|
</script>
|
|
<style>
|
@import url("../../../public/turnjs/css/basic.css");
|
</style>
|
