JS实现的3D拖拽翻页效果代码

本文实例讲述了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程序设计有所帮助。