手风琴

js手风琴

阅读更多关于 js手风琴

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none; } #box { width: 590px; height: 340px; border: #000 1px solid; position: relative; margin: 50px auto; overflow: hidden; } #box li { position: absolute; width: 590px; height: 340px; } </style> <script src="move.js"></script> <script> window.onload = function () { var oBox = document.getElementById('box'); var aLi = oBox.children; var w = 40; for (var i = 1; i < aLi.length; i++) { aLi[i].style.left = oBox.offsetWidth - w * (aLi.length - i) + 'px'; } for (var i =

手风琴效果 animate

阅读更多关于手风琴效果 animate

animate的手风琴效果 1 <style type="text/css"> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 ul{ 7 list-style: none; 8 } 9 10 .wrap { 11 width: 1020px; 12 margin: 100px auto 0; 13 } 14 .wrap li{ 15 width: 200px; 16 height: 400px; 17 float: left; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="wrap"> 23 <ul> 24 <li></li> 25 <li></li> 26 <li></li> 27 <li></li> 28 <li></li> 29 </ul> 30 </div> 31 </body> 32 </html> 33 <script src="jquery-1.11.1.min.js"></script> 34 <script type="text/javascript"> 35 var list = $("ul li"); 36 list.each(function(index,item){ 37 $(this).css('background','url(images/'+ (index

jquery实现比较靠谱的手风琴代码

阅读更多关于 jquery实现比较靠谱的手风琴代码

比较靠谱的手风琴代码 <pre> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>自制手风琴</title> <script type="text/javascript" src="/index/js/jquery.min.js"></script> <style type="text/css"> .menulist li { display: none; } </style> </head> <body> <div class="menulist"> <ul> <span>AAAAA<b>+</b></span> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> </ul> <ul> <span>BBBBB<b>+</b></span> <li>22222</li> <li>22222</li> <li>22222</li> </ul> <ul> <span>CCCCC<b>+</b></span> <li>33333</li> <li>33333</li> <li>33333</li> <li>33333</li>

阅读更多关于手风琴

<!DOCTYPE html> <html lang=" en"> <head> <meta charset=" UTF-8"> <title>横向手风琴 </title> <style> * {margin: 0;padding: 0;} .container { width: 1000px; height: 400px; margin: 0 auto; margin-top: 120px; box-shadow: 0 0 4px black; } /* 关键点就是将ul设置为弹性盒，然后通过flex-grow来对每个li进行控制 */ ul { width: 100%; height: 100%; list-style: none; display: flex; } li { width: 70px; height: 100%; overflow: hidden; transition: .5s; } .current{ flex-grow: 10; /* 将当前的li的flex-grow值设置为10 */ } </style> </head> <body> <div class=" container"> <ul> <li class=" current"> <img src=" ./img/1.jpg " alt="" height=" 400"> </li> <li>

制作手风琴效果时发现新大陆，好吧，其实是一个bug

阅读更多关于制作手风琴效果时发现新大陆，好吧，其实是一个bug

手风琴效果代码：　　<!DOCTYPE html> 　　<html> 　　 <head> 　　 <meta charset="utf-8" /> 　　 <title></title> 　　 <style> 　　 body,div{margin: 0;} 　　 .box{height: 100px;} 　　 .item{ 　　 float: left;width: 25%; 　　 height: 100%; 　　 transition: width 10s; 　　 } 　　.item:nth-of-type(1){background-color: red;} 　　 .item:nth-of-type(2){background-color: yellow;} 　　 .item:nth-of-type(3){background-color: pink;} 　　 .item:nth-of-type(4){background-color: orange;} 　　 .box:hover div{width: calc((100% - 40%) / 3);} 　　 .box .item:hover{width: 40%;} 　　 </style> 　　 </head> 　　 <body> 　　 <div class="box"> 　　 <div class="item"></div>

3(折叠手风琴)

阅读更多关于 3(折叠手风琴)

折叠效果 .collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性: 可以添加 .show 类让内容默认显示 < a href = " #demo " data-toggle = " collapse " > Collapsible </ a > < div id = " demo " class = " collapse " > Lorem ipsum dolor text.... </ div > 手风琴效果注意: 使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。 <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> 选项一 </a> </div>

jq手风琴效果，js手风琴代码

阅读更多关于 jq手风琴效果，js手风琴代码

这个手风琴效果还可以再精简一下或者升级一下，这个就后期再说吧，使用的方法在最下方。希望看见的人点赞一下。手风琴代码如下： <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <ul class="js_accordion clearfix"> <li> <a target="_blank" href="http://cenggel.com/"><img src="http://cenggel.com/wp-content/uploads/2017/12/20171230-2.png" alt="cenggel" width="320" height="450"/></a> <h3><a target="_blank" href="http://cenggel.com/">CGLweb前端</a></h3> </li> <li> <a target="_blank" href="http://cenggel.com/"><img src="http://cenggel.com/wp-content/uploads/2017/12/20171230-2.png" alt="cenggel" width="320" height="450"/></a> <h3><a target="

手风琴