使用turn.js的感悟

2016-11-26 09:54:09来源:作者:UI中国人点击

第七城市

turn.js的使用感悟

由于,最近需要做一个新型产品,品牌电商站。要求做成翻书,给用户一种不一样的体验。

在使用turn.js框架时真是遇到了不少bug,但是经过自己加上外援的帮助,终于有点掌握这本书的原理了。

我们是以官网turn.js——stevejobs这本书为原型并加以改造,(由于商业问题在这里就不写出如何改造了 )

turn.js特点如下

(1)真实翻书效果、杂志等(如下图)

(2)基于最新html5+css3技术;

(3)兼容i8及以上浏览器

(4)可以通过Ajax动态传递页面(这需要服务器的支持)

(5)内容可以用html+css+js呈现(由于后台用的是java开发,所以需要换成jsp)

(6)可自定义书本的页数

turn.js的不足

(1)由于需要通过Ajax动态传输页面,所加载的js库比较多;

(2)自己书写的js有时候不能够运行;

(3)stevejobs这本书中的2,3两页不能自由更改内容,必须通过一张名为book-covers的图片呈现内容;

(4)如果将第2页的fixed属性(在一个js里面改变)会造成第2页的位置偏离。

在项目中遇到的bug

(1)翻页的时候厚度没有了:解决方法:调整css与js中的属性;

(2)翻书的时候不能够看到左边增加,右侧减少 解决方法:不要注释

if (newPage>3)

$('.ls-book .p2 .depth').css({

width:depthWidth,

left: 20 - depthWidth

});

else

$('.ls-book .p2 .depth').css({width: 0});

depthWidth =16*Math.min(1, (pages-page)*2/pages);

if (newPage

$('.ls-book .p99 .depth').css({

width: depthWidth,

right: 20 - depthWidth,

});

else

$('.ls-book .p99 .depth').css({width:0});

}

(3)还有一些bug,以后继续分享^_^

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台