利用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 相关文章推荐
js arguments.callee的应用代码
May 07 Javascript
Google 静态地图API实现代码
Nov 19 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
JavaScript布尔运算符原理使用解析
May 06 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
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遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
详解Python当中的字符串和编码
2015/04/25 Python
python绘制双柱形图代码实例
2017/12/14 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python发展史及网络爬虫
2019/06/19 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
pycharm修改file type方式
2019/11/19 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
中专自我鉴定范文
2013/10/16 职场文书
三好学生自我鉴定
2013/12/17 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
英文演讲稿
2014/05/15 职场文书
同意迁入证明模板
2014/10/26 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python