找回密码
 立即注册
查看: 3520|回复: 8

如何做手机电子杂志?试试turnjs吧。

[复制链接]

48

主题

427

帖子

1036

积分

超级版主

Rank: 8Rank: 8

积分
1036
QQ
发表于 2016-3-14 11:22:37 | 显示全部楼层 |阅读模式
本帖最后由 wma999 于 2016-3-14 11:25 编辑

说在前面
大家好,这篇文章是电子杂志实验室开始的第一个公开实验,虽然本人在很久很久以前有做过私底下的实验,实验结果其实也很喜人,只是没有公开而已。这次是直接公开的做一个实验,这个实验大家都可以参与,也可以自己动手做一下。

多余的废话到此为止,下面开始实验。

1

实验对象turnjs,自行度娘可取。


2

实验工具,文本编辑器、editplus、subslimtext、等等都可以。只要能打开text文件就可以。

3

环境,mac和win都可以

4

服务器,既然是实验,当然就是本地实验了,不需要服务器支持。

5

试验成果检验工具,当然是手机了。


实验开始

整体turnjs其实很容易理解,看了代码就知道了。现在我们用下载下来的包里面,选择basic最基础的来做实验,发现一个很重要的问题。。。这货竟然不支持手机。。。真的。。这货整体的功能,对于pc来说很棒了,但是对于手机来说,竟然不能直接 播放。。麻烦了。。
研究一下,其实里面除了双页,也有单页模式,那就好办了。。设置display:single,开始继续实验。

出现单页了,修改一下css里面的flipbook属性,把尺寸什么的弄一下。上机实验。。。。晕。。竟然被拉伸了。。。

想办法处理尺寸问题,通过获取屏幕尺寸动态按比例设置页面尺寸。。。这个调整真费劲。

终于,出现了。。比较贴合全屏的页面。。。心里还真有点激动。。快,使用来玩玩。。。
但是,不幸的消息。。他只能拖拽翻页,他翻回上一页也只能拖拽,而且,这样的拖拽样式有违常理,这个暂时没有解决办法。但是,可以通过点击按钮激发事件来处理,下面的next按钮就是这个效果,但是往回翻的效果还是一样不好。

就只能这样了吗?

这样了吗?

了吗?

应该就是这能这这样了。

最后成果具体预览地址如下:扫描识别二维码。

源码文章后面。

到此实验到此结束。。。其实效果尚可,还能接受。开启硬件加速后流畅度还成。

ps:我还把他封装成了apk,有兴趣的可以找我索取。
ps2:关于如何封装成apk,那是另外的事情了,整理一下提供解决方案。呵呵。同理也能封装成ios。
ps3:我们还需要针对这个进行杂志化的包装,这个不属于实验范畴,属于实践了,有兴趣的读者,我们可以协助实现这个包装。

-------------------------
相关文件及实验源码:
1.turnjs下载地址:http://www.turnjs.com/  看到 download 的按钮就是。。。不会英文也能在第一屏看到这个按钮。
2.实验源码:
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0

以上。。本文完结。

文章在微信中也可以看:http://mp.weixin.qq.com/s?__biz= ... 36f249f5d50210b1#rd

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
我的博客,欢迎光临。http://blog.emaghome.com

1

主题

10

帖子

21

积分

学徒

Rank: 1

积分
21
发表于 2016-5-18 19:27:17 | 显示全部楼层
本帖最后由 任君 于 2016-5-18 19:31 编辑

试了一下,感觉有点卡,不知道是不是我手机问题

48

主题

427

帖子

1036

积分

超级版主

Rank: 8Rank: 8

积分
1036
QQ
 楼主| 发表于 2016-5-19 10:51:14 | 显示全部楼层
安卓手机是比苹果手机卡。。这个问题暂时不能解决。。
我的博客,欢迎光临。http://blog.emaghome.com

0

主题

2

帖子

4

积分

学徒

Rank: 1

积分
4
发表于 2016-8-25 13:18:14 | 显示全部楼层
请问 安卓比较卡的问题解决了吗????

48

主题

427

帖子

1036

积分

超级版主

Rank: 8Rank: 8

积分
1036
QQ
 楼主| 发表于 2016-8-26 09:35:50 | 显示全部楼层
小房子 发表于 2016-8-25 13:18
请问 安卓比较卡的问题解决了吗????

没法解决,除非你的安卓手机比较好,老手机肯定没戏。
我的博客,欢迎光临。http://blog.emaghome.com

0

主题

1

帖子

2

积分

学徒

Rank: 1

积分
2
发表于 2016-10-19 11:08:40 | 显示全部楼层
众里寻他千百度

0

主题

2

帖子

4

积分

学徒

Rank: 1

积分
4
发表于 2016-11-19 10:35:19 | 显示全部楼层
0.0QAQ22222

2

主题

6

帖子

14

积分

学徒

Rank: 1

积分
14
发表于 2017-10-26 23:04:13 | 显示全部楼层
试了一下,如果能有翻页按钮也是不错的,融通方法。而且按钮上面可以做企业LOGO,那就更好。我可以肯定。商业推广就方便很多。
发表于 2019-8-19 20:12:22 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则