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

本文实例讲述了JS实现的3D拖拽翻页效果。分享给大家供大家参考,具体如下:

以前看到一个很火的帖子,拖拽实现的翻页效果,非常的有创意,自己也很喜欢,于是乎就萌发了用自己的方法模仿的想法。感谢原创作者的创意,结果一样,但过程不一样哦。奉上代码,供大家参考。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-3d-drag-page-style-codes/

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖拽翻页</title>
<style type="text/css">
*{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;
}
</style>
<script type="text/javascript">
window.onload=function()
{
 var oDrag=document.getElementById('drag');
 var aDiv=oDrag.getElementsByTagName('div');
 var aLink=oDrag.getElementsByTagName('a');
 var i=0;
 for(i=0;i<aDiv.length;i++)
 {
  aDiv[i].style.zIndex=(i+1);
  aDiv[i].innerHTML+='<p>第 '+(i+1)+'/'+aDiv.length+' 页 提示:左右拖拽翻页</p>';
  aDiv[i].onmousedown=drag;
 }
 for(i=0;i<aLink.length;i++)
 {
  aLink[i].onmousedown=function(ev)
  {
   var oEvent=ev||event;
   oEvent.stopPropagation?oEvent.stopPropagation():oEvent.cancelBubble=true;
  };
 }
};
function drag(ev)
{
 var obj=this;
 var mouseStart=[];
 var objStart=[];
 var oEvent=ev||event;
 mouseStart.x=oEvent.clientX;
 objStart.x=this.offsetLeft;
 document.onmousemove=function(ev)
 {
  var oEvent=ev||event;
  var l=oEvent.clientX-mouseStart.x+objStart.x;
  var t=oEvent.clientY-mouseStart.y+objStart.y;
  obj.style.left=l+'px';
  return false;
 };
 document.onmouseup=function()
 {
  document.onmousemove=document.onmouseup=null;
  startMove(obj);
 };
 return false;
}
function startMove(obj)
{
 var oDrag=document.getElementById('drag');
 var aDiv=oDrag.getElementsByTagName('div');
 var iSpeed=0;
 obj.timer=setInterval(function(){
  obj.onmousedown=null;
  obj.offsetLeft>=0?iSpeed+=10:iSpeed-=10;
  var l=obj.offsetLeft+iSpeed;
  if(l>obj.offsetWidth)
  {
   l=obj.offsetWidth;
   moveDirection(iSpeed);
  }
  else if(l<-obj.offsetWidth)
  {
   l=-obj.offsetWidth;
   moveDirection(iSpeed);
  }
  obj.style.left=l+'px';
 },30);
 function moveDirection(iSpeed)
 {
  for(i=0;i<aDiv.length;i++)
  {
   aDiv[i].style.zIndex=parseInt(aDiv[i].style.zIndex)+1;
   if(aDiv[i]==obj)
   {
    obj.style.zIndex=parseInt(obj.style.zIndex)-aDiv.length;
   }
  }
  clearInterval(obj.timer);
  t=setInterval(function(){
   obj.onmousedown=null;
   var l=obj.offsetLeft-iSpeed;
   if((iSpeed<0 && l>0) || (iSpeed>0 && l<0))
   {
    l=0;
    clearInterval(t);
    obj.onmousedown=drag;
   }
   obj.style.left=l+'px';
  },30);
 }
}
</script>
</head>
<body>
<div id="drag">
 <div>
  <ul>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">东方之珠</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">啊!爱人</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">宁静温泉</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">你的样子</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲1980</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲1990</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲2000</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">亚细亚的孤儿</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">伴侣</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">童年</a></li>
  </ul>
 </div>
 <div>
  <ul>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">爱的箴言</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">爱人同志</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">思念</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">母亲</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">是否</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">牧童</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">青春舞曲</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">蒲公英</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">未来的主人翁</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">如今才是唯一</a></li>
  </ul>
 </div>
 <div>
  <ul>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">暗恋</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">弹唱词</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">飞车</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">东方之珠</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">滚滚红尘</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">光阴的故事</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">之乎者也</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">现象七十二变</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">乡愁四韵</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">穿过你的黑发我的手</a></li>
  </ul>
 </div>
 <div>
  <ul>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">大兵歌</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">歌</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">黄色面孔</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">台北红玫瑰</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">我所不能了解的事</a></li>
  </ul>
 </div>
</div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

时间: 2015-10-28

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" class="open" value=&quo

js实现3D图片环展示效果

可对整体进行拖拽 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{padding:0;margin:0; font-family: "Proxima Nova","proxima-nova&qu

js模拟3D场景效果代码打包

要在二维空间模拟出三维的效果,就需要把三维的坐标转换成二维坐标.一个最基本依据是:东西越远,看到大小就越小,坐标越往消失点靠拢. 透视公式: scale = fl / (fl + z); scale是大小的比例值,0.0到1.0之间,fl是观察点到成像面的距离,通常这个值是固定,z就是物件的三维空间中的z轴. 在写这些代码之前,我喜欢用面向对象来描述我写的这些东西,比如我需要一个场景,场景是个空间,空间内是可以容纳各种物件的,物件是个对象,物件是是x,y,z三个维度的,场景可以插入任意多的物件,

js+vml创建3D页面效果代码

v\:* { Behavior: url(#default#VML) } body{margin:0px} 向左旋转 暂停旋转 向右旋转 var q=40; var r=(q*3.1415926)/180 var v=new Array() var l=new Array() v[0]="0,400,0" v[1]="100,350,15" v[2]="200,400,0" v[3]="0,400,300" v[4]=&quo

基于javascript html5实现3D翻书特效

这是一款十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果.书本中的文字和图片也会3D展示,非常酷. 在线演示 源码下载 HTML代码 <div class="book p3d"> <div class="back-cover p3d"> <div class="page back flip"></div> <div

JS实现3D图片旋转展示效果代码

本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c

纯JS实现旋转图片3D展示效果

CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style> Html: input id="l" type

js实现3D图片展示效果

点击左上角的按钮前后切换 效果图: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0; padding:0; list-style:none;} ul{ width:300px; height:300px; margin:100px auto; positi

原生javascript+css3编写的3D魔方动画旋扭特效

一直从事于后端编程工作,工作中也经常接触和使用一些前端技术,但大多数还是用于操作和控制数据与客户端交互工作.随着互联网技术的发展以及硬件性能的不断提升,人们对于交互式体验已变得越来越重视,进而前端技术已经越来越突显出它的重要性,特别是一些炫酷的特效,精美的UI设计,都使人眼前一亮,顿时觉得网站平台都高大上不少,很博人们眼球,给人们以很好的视觉冲击,特别是现在的css3,HTML5技术的更新,使得以更小的代价就可以轻松实现这些效果,故此,顿时膜拜起前端技术,悠然起了兴趣,跃跃欲试,随机利用css3

js实现3D图片逐张轮播幻灯片特效代码分享

本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现3D图片逐张轮播幻灯片特效代码如下 <head> <meta http-equiv="Content-Type

js带点自动图片轮播幻灯片特效代码分享

本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link rel="stylesheet" href="css/zzsc.css&qu

jQuery超精致图片轮播幻灯片特效代码分享

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:                               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="styles/97zzw.css"

jQuery图片轮播滚动切换代码分享

本文实例讲述了jQuery图片轮播滚动切换特效.分享给大家供大家参考.具体如下: jQuery图片轮播滚动切换代码是一款简单的jquery四张图片轮播滚动切换效果代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" type="text/css" h

jquery带有索引按钮且自动轮播切换特效代码分享

本文实例讲述了jquery带有索引按钮且自动轮播切换特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的带有索引按钮且自动轮播切换特效代码,实现过程很简单. 运行效果图:                              -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" hr

bootstrap轮播图示例代码分享

本文实例为大家分享了bootstrap轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view

js实现点击文本框显示日期选择器特效代码分享

为大家分享的JavaScript图片轮播代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js点击文本框显示日期选择器</title> <link type="text/css" rel="stylesheet" href="calen

jQuery实现图片轮播特效代码分享

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: jquery图片轮播插件PgwSlider是一款非常简单的jquery插件,它可以帮你快速创建一个垂直轮播图. 运行效果图: 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="css/pgwslider.min.css" rel="stylesheet"> (2)js代码: <script sr

jquery图片轮播特效代码分享

本文实例讲述了jquery图片轮播特效.分享给大家供大家参考.具体如下: 这是一款仿淘宝首页jquery轮播焦点图,基于jquery实现仿淘宝网首页正中间小焦点图特效. 运行效果图:         -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片轮播特效代码如下 <!DOCTYPE html> <head> <meta http-equiv=

js图片卷帘门导航菜单特效代码分享

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于js实现图片卷帘门导航菜单特效代码,与以往的导航菜单相比,更具有创新性,不止是简单的向用户展示信息,而是更加丰富网站的整体内容. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/style.css" re