利用Js+Css实现折纸动态导航效果实例源码


Posted in Javascript onJanuary 25, 2017

先来看看第一种实现方式

效果图如下:

利用Js+Css实现折纸动态导航效果实例源码

利用Js+Css实现折纸动态导航效果实例源码

不再采用ul li的布局方式

-webkit-transform-style:preserve-3d只对子元素有作用,所以每个div都加。

实例源码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.wrap{margin:30px auto;width:302px;-webkit-perspective:800px; -webkit-transform-style:preserve-3d; position:relative;}
.wrap div{ position:absolute; top:52px;left:0;-webkit-transform-style:preserve-3d; -webkit-transform-origin:top;}
.wrap span{ display:block;width:300px;border:1px solid #000;height:50px; font:16px/50px "宋体"; background:#ccc;}
</style>
</head>
<body>
<input type="button" value="展开" />
<input type="button" value="收缩" />
<div class="wrap" id="list">
 <span>第一项</span>
 <div>
  <span>第二项</span>
  <div>
   <span>第三项</span>
   <div>
    <span>第四项</span>
    <div>
    <span>第五项</span>
     <div>
      <span>第六项</span>
      <div>
       <span>第七项</span>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
<script>
window.onload=function()
{
 var oList=document.getElementById("list");
 var aDiv=oList.getElementsByTagName("div");
 var aBtn=document.getElementsByTagName("input");
 aBtn[1].onclick=function()
 {
 for(var i=0;i<aDiv.length;i++)
 {
 aDiv[i].style.transition="0.5s "+(aDiv.length-i)*100+"ms";
 aDiv[i].style.WebkitTransform="rotateX(60deg)";
 }
 };
 aBtn[0].onclick=function()
 {
 for(var i=0;i<aDiv.length;i++)
 {
 aDiv[i].style.transition="0.5s "+i*100+"ms";
 aDiv[i].style.WebkitTransform="rotateX(0deg)";
 }
 };
};
</script>
</body>
</html>

第二种实现方式

效果图如下:

利用Js+Css实现折纸动态导航效果实例源码

利用Js+Css实现折纸动态导航效果实例源码

这个原先是隐藏的,点击后才展开。

通过关键帧控制每个div的展开状态,当要展开的时候给每个div添加className,但是这个className不是一下子全部添加上去的,而是有延时的,所以用到了定时器。

实例源码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes open{
 0%
 {
 -webkit-transform:rotateX(-120deg);
 } 
 40%
 {
 -webkit-transform:rotateX(30deg);
 }
 60%
 {
 -webkit-transform:rotateX(-20deg);
 }
 80%
 {
 -webkit-transform:rotateX(10deg);
 }
 100%
 {
 -webkit-transform:rotateX(0deg);
 }
}
.wrap{margin:30px auto;width:300px;-webkit-perspective:800px;position:relative;}
.wrap h2{ height:50px;background:#F03; text-align:center; font:16px/50px "微软雅黑"; color:#fff; position:relative;z-index:2;}
.wrap div{ position:absolute; top:32px;left:0;-webkit-transform-style:preserve-3d; -webkit-transform-origin:top; -webkit-transform:rotateX(-120deg); transition:.5s;}
.wrap>div{ top:50px;}
.wrap .open{-webkit-animation:open 2s;-webkit-transform:rotateX(0deg);}
.wrap span{ display:block;width:300px;height:30px; font:14px/30px "宋体"; background:#6F3; text-indent:15px; color:#fff; transition:.5s; box-shadow:inset 0 0 30px 20px rgba(0,0,0,1);}
.wrap .open>span{box-shadow:inset 0 0 30px 10px rgba(0,0,0,0);}
.wrap span:hover{ background:#FF0;text-indent:30px;}
</style>
</head>
<body>
<input type="button" value="展开" />
<input type="button" value="收缩" />
<div class="wrap" id="list">
 <h2>标题</h2>
 <div>
  <span>第一项</span>
  <div>
   <span>第二项</span>
   <div>
    <span>第三项</span>
    <div>
     <span>第四项</span>
     <div>
      <span>第五项</span>
      <div>
       <span>第六项</span>
       <div>
        <span>第七项</span>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div> 
</div>
<script>
window.onload=function()
{
 var oList=document.getElementById("list");
 var aDiv=oList.getElementsByTagName("div");
 var aBtn=document.getElementsByTagName("input");
 var oTimer=null;
 aBtn[1].onclick=function()
 {
 var i=aDiv.length-1;
 clearInterval(oTimer);
 oTimer=setInterval(function(){
 aDiv[i].className="";
 i--;
 if(i<0)
 {
 clearInterval(oTimer);
 }
 },50); 
 };
 aBtn[0].onclick=function()
 {
 var i=0;
 clearInterval(oTimer);
 oTimer=setInterval(function(){
 aDiv[i].className="open";
 i++;
 if(i==aDiv.length)
 {
 clearInterval(oTimer);
 }
 },200);
 };
};
</script>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
js 页面输出值
Nov 30 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
js仿京东放大镜效果
Aug 09 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
element tree树形组件回显数据问题解决
Aug 14 Javascript
jquery实现拖动效果(代码分享)
Jan 25 #Javascript
angular forEach方法遍历源码解读
Jan 25 #Javascript
three.js实现围绕某物体旋转
Jan 25 #Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 #Javascript
angular和BootStrap3实现购物车功能
Jan 25 #Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 #Javascript
谈谈JavaScript数组常用方法总结
Jan 24 #Javascript
You might like
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
jquery创建div 实现代码
2009/04/27 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
使用angular写一个hello world
2015/01/23 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
Python学习资料
2007/02/08 Python
Python实现的Kmeans++算法实例
2014/04/26 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
厂长助理岗位职责
2013/12/27 职场文书
社团活动总结
2014/04/28 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
Python基础知识之变量的详解
2021/04/14 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python