本文实例讲述了JS实现的3D拖拽翻页效果。分享给大家供大家参考,具体如下:
以前看到一个很火的帖子,拖拽实现的翻页效果,非常的有创意,自己也很喜欢,于是乎就萌发了用自己的方法模仿的想法。感谢原创作者的创意,结果一样,但过程不一样哦。奉上代码,供大家参考。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-3d-drag-page-style-codes/
具体代码如下:
拖拽翻页 *{margin:0;padding:0;} body{font-size:12px; overflow:hidden;} img{border:0;} li{list-style:none;} #drag{ width:682px; color:#fff; position:relative; margin:50px auto 0 auto; font-family:"Microsoft YaHei", "宋体"; } #drag ul{ } #drag ul li{ text-align:right; height:30px; line-height:30px; overflow:hidden; vertical-align:middle; font-size:14px; border-bottom:1px dashed #fff; } #drag ul li span{ float:right; } #drag ul li a{ float:left; color:#fff; text-decoration:none; } #drag div{ width:600px; height:350px; padding:40px; background:#77521d; cursor:e-resize; border:1px solid #999; position:absolute; left:0; top:0; } #drag div p{ width:100%; padding-bottom:20px; text-align:center; position:absolute; bottom:0; left:0; }
- 2009-4-9 12:35东方之珠
- 2009-4-9 12:35啊!爱人
- 2009-4-9 12:35宁静温泉
- 2009-4-9 12:35你的样子
- 2009-4-9 12:35恋曲1980
- 2009-4-9 12:35恋曲1990
- 2009-4-9 12:35恋曲2000
- 2009-4-9 12:35亚细亚的孤儿
- 2009-4-9 12:35伴侣
- 2009-4-9 12:35童年
- 2009-4-9 12:35爱的箴言
- 2009-4-9 12:35爱人同志
- 2009-4-9 12:35思念
- 2009-4-9 12:35母亲
- 2009-4-9 12:35是否
- 2009-4-9 12:35牧童
- 2009-4-9 12:35青春舞曲
- 2009-4-9 12:35蒲公英
- 2009-4-9 12:35未来的主人翁
- 2009-4-9 12:35如今才是唯一
- 2009-4-9 12:35暗恋
- 2009-4-9 12:35弹唱词
- 2009-4-9 12:35飞车
- 2009-4-9 12:35东方之珠
- 2009-4-9 12:35滚滚红尘
- 2009-4-9 12:35光阴的故事
- 2009-4-9 12:35之乎者也
- 2009-4-9 12:35现象七十二变
- 2009-4-9 12:35乡愁四韵
- 2009-4-9 12:35穿过你的黑发我的手
- 2009-4-9 12:35大兵歌
- 2009-4-9 12:35歌
- 2009-4-9 12:35黄色面孔
- 2009-4-9 12:35台北红玫瑰
- 2009-4-9 12:35我所不能了解的事
希望本文所述对大家Javascript程序设计有所帮助。



