首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 31, 2015

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

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

运行效果截图如下：

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

在线演示地址如下：

具体代码如下：

<!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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
javascript 对象定义方法 简单易学
Mar 22 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
JS表格组件神器bootstrap table详解（基础版）
Dec 08 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
vue.js的安装方法
May 12 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 #Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 #Javascript
js实现点击获取验证码倒计时效果
Jan 28 #Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 #Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 #Javascript
jQuery+Ajax实现无刷新分页
Oct 30 #Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 #Javascript
日志(1) Get(1) 条码(1) Post(1) 磁盘管理(1) 虚拟机(3) plus.io(1) 目录管理(1) 二维码(2) html5+(1)
You might like
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP设计模式之数据访问对象模式（DAO）原理与用法实例分析
2019/12/12 PHP
简明json介绍
2008/09/28 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
基于NodeJS的前后端分离的思考与实践（三）轻量级的接口配置建模框架
2014/09/26 NodeJs
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
js实现购物车功能
2018/06/12 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
vue iview实现动态新增和删除
2020/06/17 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python实现windows下文件备份脚本
2018/05/27 Python
Python多继承原理与用法示例
2018/08/23 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
python如何使用代码运行助手
2020/07/03 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
机械设计及其自动化专业求职信
2014/06/09 职场文书
2015年工商所工作总结
2015/05/21 职场文书
故意伤害辩护词
2015/05/21 职场文书
观后感的写法
2015/06/19 职场文书
教务处干事工作总结
2015/08/14 职场文书