利用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>

第二种实现方式

效果图如下：

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

通过关键帧控制每个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>

总结

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

赞 (0)

相关推荐

  • js实现文字选中分享功能

    总结:文字选中IE和其他浏览器不一样 在IE中文字选中后鼠标抬起,图片显现触发有点快所以用定时器. <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min

  • 利用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;widt

  • JS+CSS实现精美的二级导航效果代码

    JS+CSS实现精美的二级导航效果代码

    本文实例讲述了JS+CSS实现精美的二级导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于JS+CSS实现的精美二级导航,适合想学一些基础点的.基础js知识技巧的朋友们.其实本菜单的完成不仅仅是需要基础知识,更需要的是对CSS熟悉之后的巧妙构思,菜单可能都会写,但写出好菜单就不那么容易了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jm-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE htm

  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

  • 利用js给datalist或select动态添加option选项的方法

    有时需要从配置文件中读取信息,然后添加到用户的选择项中,比如select的option选项,下面针对此类情况做了一个实例 内容如下: <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head&

  • 基于JS快速实现导航下拉菜单动画效果附源码下载

    基于JS快速实现导航下拉菜单动画效果附源码下载

    这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示         源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&

  • JS实现快速的导航下拉菜单动画效果附源码下载

    JS实现快速的导航下拉菜单动画效果附源码下载

    这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 查看演示     下载源码 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav<span aria-hidden=&qu

  • JS+CSS实现仿msn风格选项卡效果代码

    JS+CSS实现仿msn风格选项卡效果代码

    本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码.分享给大家供大家参考,具体如下: 这是一款来自MSN网站的选项卡,清新淡蓝色风格,新闻类.资讯类.文章类网站都比较适合使用,代码扩展性高,W3C标准设计,兼容IE.火狐等多种浏览器,整体效果非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • js实现显示当前状态的导航效果代码

    js实现显示当前状态的导航效果代码

    本文实例讲述了js实现显示当前状态的导航效果代码.分享给大家供大家参考.具体如下: 这里演示显示当前状态的导航,鼠标点击左侧的导航菜单,右侧的内容就会变换,实际上是一个竖向的TAB选项卡,作为菜单来用的话,它正好可以显示当前的菜单位置,比较经典. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-show-nav-style-status-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD

  • JS实现灵巧的下拉导航效果代码

    JS实现灵巧的下拉导航效果代码

    本文实例讲述了JS实现灵巧的下拉导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于JS实现下拉菜单,是一款灵巧的网站导航条,支持二级显示,向下滑动显示,经典的下拉菜单,JS和CSS共同编写实现,Li菜单列表风格,便于修改,兼容各大主流浏览器,相信你也会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-down-nav-blue-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC

  • js+css简单实现网页换肤效果

    js+css简单实现网页换肤效果

    本文实例讲述了js+css简单实现网页换肤效果.分享给大家供大家参考,具体如下: 这里做了3套外观,分别使用不同文件夹下的同名css文件,那么怎样实现js替换加载呢? 3个按钮如下: <a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br

随机推荐