下面给大家分享基于原生js实现的图片翻书效果,具体代码如下所示:
JS实现图片翻书效果-懒人图库 #center { LEFT: 50%; POSITION: absolute; TOP: 50% } #DHTMLBOOK { BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px } #TXTBOX { FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center } .page { OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100% } .right { BORDER-RIGHT: #000000 1px solid; LEFT: 50% } .turn { BACKGROUND: #000000 } .img { WIDTH: 200%; POSITION: absolute; HEIGHT: 100% }
以上所述是小编给大家介绍的原生JS实现图片翻书效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对本站网站的支持!
您可能感兴趣的文章:
- 基于Turn.js 实现翻书效果实例解析
- 移动端H5开发 Turn.js实现很棒的翻书效果
- 基于javascript html5实现3D翻书特效
- js图片翻书效果代码分享
- JS实现图片翻书效果示例代码
以上就是原生JS实现图片翻书效果的详细内容,更多请关注本站其它相关文章!