利用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 相关文章推荐
jQuery 1.8 Release版本发布了
Aug 14 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
es6函数之尾调用优化实例分析
Apr 25 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
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
用jquery存取照片的具体实现方法
2013/06/30 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
通过js给网页加上水印背景实例
2019/06/17 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
python实现顺序表的简单代码
2018/09/28 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
高中班主任评语大全
2014/04/25 职场文书
美术社团活动总结
2014/06/27 职场文书
建筑节能汇报材料
2014/08/22 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
单位更名证明
2015/06/18 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server