我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

turn.js异步加载实现翻书效果

turn.js异步加载实现翻书效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

成都创新互联专注于企业全网营销推广、网站重做改版、石首网站定制设计、自适应品牌网站建设、H5建站商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为石首等各大城市提供网站开发制作服务。

1、阅读翻书js

/**
 * 电子翻书
 */
//var width = 1080;
//var height = 1680;
 
var width = "10rem";
var height = "15.2rem";
 
window.onload = function () {
 
 //预加载
 //loading(18,1);
 initData();
}
 
function getQueryString(name) {
 var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
 if (result == null || result.length < 1) {
  return "";
 }
 return result[1];
}
 
function initData(){
 var book = getQueryString("bookId");
 var count = getQueryString("pageCount");
 loading_img_url = new Array();
 for (var i = 0; i < count; i++) {
 loading_img_url.push((i+1) + ".png");
 }
 var page = getQueryString("pageNum");
 if(!page){
 page =1;
 }
 loading(book,count,page);
}
 
var date_start;
var date_end;
date_start = getNowFormatDate();
//加载图片
var loading_img_url = [];
 
//加载页面
function loading(book,count,page) {
 var numbers = 0;
 var length = loading_img_url.length;
 //var resUrl = ctxStatic+"/modules/intelligentquery/img/3/";
 var resUrl = website + "/lawcase/bookScreenshot?bookId=" + book + "&page=";
 var jsUrl = ctxStatic+"/modules/front/guide/vertical/";
 var bookId = book;
  var img = new Image();
  img.src = resUrl + page;
  //img.src = resUrl + pageNum + ".png";
  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)) {
    //$('.number').hide();
    date_end = getNowFormatDate();
    var loading_time = date_end - date_start;
    //预加载图片
    $(function progressbar() {
     //拼接图片
     $('.shade').hide();
     var tagHtml = "";
     var imgUrl = resUrl + page;
     //var imgUrl = resUrl + (pageNum) + ".png";
     if (pageNum == 1) {
      tagHtml += "
";      } else if (pageNum == length) {       tagHtml += "
";      } else {       tagHtml += "
";      }      $(".flipbook").append(tagHtml);      var w = $(".graph").width();      $(".flipbook-viewport").show();     });         //配置turn.js     function loadApp() {      var w = width;      var h = height;      $('.flipboox').width(w).height(h);      $('.flipbook').turn({       width: w,       height: h,       elevation: 50,       pages: count,       display: 'single',       gradients: true,       autoCenter: true,       when: {        turning: function (e, page, view) {         var total = $(".flipbook").turn("pages");//总页数         $("#currentPage").html(page);         $("#pageCount").html("/"+total);         if (page == 1) {          $(".btnImg").css("display", "none");          $(".mark").css("display", "block");         } else {          $(".btnImg").css("display", "block");          $(".mark").css("display", "none");         }         if (page == length) {          $(".nextPage").css("display", "none");         } else {          $(".nextPage").css("display", "block");         }        },        turned: function (e, page, view) {         var total = $(".flipbook").turn("pages");//总页数         $("#currentPage").html(page);         $("#pageCount").html("/"+total);         // 判断翻页按钮点击事件以及状态样式         if(page >= total){          $("#next").addClass("btn-invalid").removeAttr('onclick');         }else{          $("#next").removeClass("btn-invalid").attr("onclick","next();");         }         if(page == 1){          $("#prev").addClass("btn-invalid").removeAttr('onclick');          $("#indexPage").css("display","none");         }else{          $("#prev").removeClass("btn-invalid").attr("onclick","prev();");          $("#indexPage").css("display","flex");         }        },        missing: function (e, pages) {         for (var i = 0; i < pages.length; i++) {          addPage(pages[i], $(this),bookId);         }        }           }      })   var cpage = getQueryString("pageNum");   $(".flipbook").turn('page', cpage);     }     yepnope({      test: Modernizr.csstransforms,      yep: [jsUrl+'js/turn.js'],      complete: loadApp     });    }   } }   function 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; }   //异步加载 function addPage(page, book,bookId) {  //var resUrl = ctxStatic+"/modules/intelligentquery/img/3/";  var resUrl = website + "/lawcase/bookScreenshot?bookId=" + bookId + "&page=";  var imgUrl = resUrl + (page);  var tagHtml = "";  if (page == 1) {   tagHtml += "
";  } else if (page == length) {   tagHtml += "";  } else {   tagHtml += "
";  }    // Check if the page is not in the book  if (!book.turn('hasPage', page)) {   // Create an element for this page   var element = $('').html('');   // Add the page   book.turn('addPage', element, page);   element.html(tagHtml);  } }

2、阅读页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>






 
 
 
 
 
 
 阅读
 
 
 
 
 
 
 
 
 
 
 
 .flipbook img{
 width:10rem;
 height:15.2rem;
 }
 .book-wrapper{
 background-image: url(''); 
 }
 
 


 
  
   

阅读

                                                                        
         
  •              
  •      
  •              
  •             0/0

               
  •              
  •      
  •               跳至                                     
  •      
  •              
  •     
          

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


标题名称:turn.js异步加载实现翻书效果
转载源于:http://shouzuofang.com/article/jipoci.html