宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-09-06

先来看看第一种实现方式

效果图如下:

不再采用ul li的布局方式

-web套件-转换-样式: preserve-3d只对子元素有作用,所以每个差异都加。

实例源码

!doctype html html ownerta charset=' utf-8 '标题无标题文档/title样式。自动换行{ margin :30 px宽度宽度:800 px网络套件-透视:800 px-web套件-转换-style : preserve-3d;位置:相对;}.换行div { position : absolutetop :52 ppxleft :0-web kit-transform-style : preserve-3d;-web套件-transform-origin : top;}.包装跨度{显示:块宽度宽度:300像素边界:1像素固体# 000;高度:50 pxfont:16px/50px '宋体;背景# CCC }/style/head dyinput 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脚本窗口。onload=function(){ var oList=document。getelementbyid(' list ');var ADiv=Olist。GetElementsBytagname(' div ');var aBtn=文档。getelementsbytagname(' input ');aBtn[1].onclick=function(){ for(var I=0;iaDiv.lengthI){ ADiv[I]。风格。跃迁=' 0.5s '(ADiv。长度-I)* 100 ' ms ';aDiv[I]。风格。webkittransform=' rotateX(60)';} };aBtn[0].onclick=function(){ for(var I=0;iaDiv.lengthI){ ADiv[I]。风格。跃迁=' 0.5s ' I * 100 ' msaDiv[I]。风格。webkittransform=' rotateX(0)';} };};/脚本/正文/html第二种实现方式

效果图如下:

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

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

实例源码

!doctype html html ownerta charset=' utf-8 '标题无标题文档/title style @-web工具包-关键帧打开{ 0% {-web kit-transform : rotatex(-120);} 40% {-web kit-transform : rotatex(30度);} 60% {-web kit-transform : rotatex(-20);} 80% {-web kit-transform : rotatex(10度);} 100% {-web kit-transform : rotatex(0度);}}.自动包装{ margin:30px宽度宽度:300像素-网络套件-透视:800像素;位置:相对;}.包装h2 { height:50px背景技术# F03文本对齐:居中;font:16px/50px '微软雅黑;color: # fff位置:相对;z索引:2;}.换行div { position : absolutetop 336032 ppxleft :0-web kit-transform-style : preserve-3d;-web套件-transform-origin : top;-web套件-transform : rotatex(-120);transition:5s }。wrapdiv { top:50px}。包起来open {-web kit-animation : open 2s;-web套件-transform : rotatex(0度);}.包装跨度{显示:块宽度宽度:300像素高度:30 pxfont:14px/30px '宋体;背景# 6F3text-缩进:15 pxcolor : # fffttransition :5 sbox-shadow : inset 0 0 30px 20px rgba(0,0,0,1);}.包起来open span { box-shadow : inset 0 0 30px 10px rgba(0,0,0,0);}.换行span :悬停{背景: # FF0文本-缩进:30像素;}/style/head dyinput type=' button ' value='展开/input type='button' value='收缩/div class='wrap' id='list' h2标题/h2 div跨度第一项/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脚本窗口。onload=function(){ var oList=document。getelementbyid(' list ');var ADiv=Olist。GetElementsBytagname(' div ');var aBtn=文档。getelementsbytagname(' input ');var oTimer=nullaBtn[1].onclick=function(){ var I=ADiv。长度-1;clearInterval(oTimer);oTimer=set interval(function(){ ADiv[I]).class name=I-;if(i0){ clearInterval(oTimer);} },50);};aBtn[0].onclick=function(){ var I=0;clearInterval(oTimer);oTimer=set interval(function(){ ADiv[I]).打开我;if(I==ADiv。长度){ clearInterval(oTimer);} },200);};};/脚本/正文/html总结

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

更多资讯
游戏推荐
更多+