这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要给大家介绍了利用 Js+CSS 实现折纸动态导航的效果,实现后的效果非常不错,文中给出了简单的介绍和完整的实例代码,对大家具有一定的参考价值,有需要的朋友们下面来一起看看吧。
先来看看第一种实现方式
效果图如下:
不再采用 ul li 的布局方式
只对子元素有作用,所以每个 div 都加。
- -webkit-transform-style:preserve-3d
实例源码
- <!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>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0712/328138.html