首页 > 房产 > 房产 > 教你用turn.js制作一个炫丽的翻页杂志

教你用turn.js制作一个炫丽的翻页杂志

来源:整理 时间:2022-08-20 05:38:26 编辑:派代电商 手机版

缓存很简单:我们使用的是一个临时的文件 - cache.txt的 - 存储图像阵列的序列化表示。如果缓存文件是不存在的,或超过一个多小时,我们发出了一个新的API请求。

jQuery

使用turn.js是非常简单。

assets/js/script.js

[html]

    $(function(){ var mag = $(''#magazine''); // initiazlie turn.js on the #magazine div mag.turn(); // turn.js defines its own events. We are listening // for the turned event so we can center the magazine mag.bind(''turned'', function(e, page, pageObj) { if(page == 1 && $(this).data(''done'')){ mag.addClass(''centerStart'').removeClass(''centerEnd''); } else if (page == 32 && $(this).data(''done'')){ mag.addClass(''centerEnd'').removeClass(''centerStart''); } else { mag.removeClass(''centerStart centerEnd''); } }); setTimeout(function(){ // Leave some time for the plugin to // initialize, then show the magazine mag.fadeTo(500,1); },1000); $(window).bind(''keydown'', function(e){ // listen for arrow keys if (e.keyCode == 37){ mag.turn(''previous''); } else if (e.keyCode==39){ mag.turn(''next''); } }); });

CSS

我们需要建立明确的尺寸的杂志和风格的页面和页码。 turn.js将处理其余部分。

[html]

    #magazine{ width:1040px; height:520px; margin:0 auto; position:relative; left:0; opacity:0; -moz-transition:0.3s left; -webkit-transition:0.3s left; transition:0.3s left; } #magazine .page{ width:520px; height:520px; background-color:#ccc; overflow:hidden; } /* Center the magazine when the cover is shown */ #magazine.centerStart{ left:-260px; } /* Center the magazine when the last page is shown */ #magazine.centerEnd{ left:260px; } .page img{ height:520px; width:520px; display:block; } /* Show a dark shadow when the cover is shown */ .centerStart .turn-page-wrapper:first-child{ box-shadow:0 0 10px #040404; } /* Page Numbers */ span.pageNum{ background-color: rgba(0, 0, 0, 0.3); bottom: 25px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); color: #FFFFFF; font-size: 11px; height: 24px; line-height: 22px; opacity: 0.9; position: absolute; text-align: center; width: 55px; } span.pageNum.left{ left:0; right:auto; } span.pageNum.right{ left:auto; right:0; } /* Hide the page number on the cover */ #page1 .pageNum{ display:none; }

我们就大功告成了!
这个例子可以在所有最新的浏览器 - 火狐,Chrome,Safari,Opera和甚至IE浏览器。它甚至可用iOS和Android。


文章TAG:网站建设instagram服务器

最近更新

房产排行榜推荐