微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javaScript+turn.js实现图书翻页效果实例代码

为了实现图书翻页效果我们在网上可以看到很多教程在这里推荐turn.js网上的turn.js 有api不过是英文的 很多人看起来不方便.关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单!

首先附上个人的文件路径

对于css 和 js文件不需要过多的解释 在这里要注意的是pages文件夹 这里个文件夹下放的是需要预览的图片文件 所以 我们想展示的资源 就放在这个目录下面!!!!!!

接下来 先给大家看一下pages下面的资源名称

可以看到 所有的资源都以数字命名 至于为什么 我们在之后会讲解

接下来 我们开始使将turn.js结合到我们自己的项目中 先附上index.html中的代码

rush:js;"> Using turn.js and the new zoom feature <Meta name="viewport" content="width = 1050,user-scalable = no"/> nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
nore="1" class="next-button">
nore="1" class="prevIoUs-button">

一:在其中值得注意的是

:对于js的引用有两处!

1:是开头这里引用了css和js

rush:js;"> nofollow" rel="external nofollow" rel="stylesheet" type="text/css">

原文地址:https://www.jb51.cc/js/41614.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐