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

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

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

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

标签网站建设 turn.js 翻页杂志

这个翻页效果使用的是典型的Flash动画翻页效果,在网络上,随着时间的推移,其受欢迎程度下降,经过点小改造可以让他用在移动设备上。
在本教程中,我们将使用PHP和turn.js插件,纯CSS3和jQuery的页面翻页效果来实现,建立一本漂亮的杂志。
HTML
首先,我们需要做好今天的例子的基础。我们将使用一个单一的页面,在同一个文件中结合HTML5标记和PHP,使之更为简明。你可以看到生成的布局如下:

index.php

[html]

    > <html> <head> <meta charset="utf-8" /> <title>用turn.js制作一个翻页杂志title> <link rel="stylesheet" href="http://www.web0752.com/assets/css/styles.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js">script> <script src="http://www.web0752.com/assets/js/turn.js">script> <scriptsrcscriptsrc="http://www.web0752.com/assets/js/script.js">script> body> html>

我们把CSS文件包含在头部,js文件包含在底部。然后初始化js插件和监听键盘事件。PHP代码将写在#magazine div中。

举个例子,这里是前三页的杂志的标记:

Generated code

[html]

    <div id="page1" > <div > <span >1 // 32span> <img src="/Admin/eWebEditor/UploadFile/201242794247547.jpg" alt="Cover" /> div> div> <div id="page2" > <div > <span >2 // 32span> <img src="‍/Admin/eWebEditor/UploadFile/201242794247189.gif‍" alt="网站建设logo" /> div> div> <div id="page3" > <div > <span >3 // 32span> <img src="/Admin/eWebEditor/UploadFile/201242794247189.gif" alt="网站建设logo" /> div> div>

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


    PHP

    PHP代码的任务是和Instagrna的API通信,获取数据结果,生成上面所看到的标记。

    这里是目前一个流行的JSON响应图像的Instagram例子。我省略了一些属性,使代码更易于阅读。

    Popular images JSON response

    [html]

      { "meta": { "code": 200 }, "data": [{ "tags": ["beautiful", "sky"], "location": "null", "comments": { "count": 31, "data": [...] }, "filter": "Normal", "created_time": "1331910134", "link": "http:\/\/instagr.am\/p\/IPNNknqs84\/", "likes": { "count": 391, "data": [..] }, "images": { "low_resolution": { "url": "http:\/\/distilleryimage8.

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

最近更新

房产排行榜推荐