Html5 js实现手风琴效果
使用H5实现横向的手风琴功能,供大家参考,具体内容如下
<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; } div{ width:522px; height:222px; margin:50pxauto; border:1pxsolidred; box-sizing:border-box; box-sizing:border-box; } ul{ overflow:hidden; height:222px; } li{ float:left; height:222px; list-style:none; box-sizing:border-box; } h3{ width:50px; float:left; height:222px; border:1pxsolidgreen; box-sizing:border-box; } img{ width:0px; float:left; } .img{ width:220px; } </style> </head> <body> <div> <ul> <li><h3>1</h3><imgsrc="images/01.jpg"alt=""/></li> <li><h3>2</h3><imgsrc="images/02.jpg"alt=""/></li> <li><h3>3</h3><imgsrc="images/03.jpg"alt=""/></li> <li><h3>4</h3><imgsrc="images/04.jpg"alt=""/></li> <li><h3>5</h3><imgsrc="images/01.jpg"alt=""/></li> <li><h3>6</h3><imgclass="img"src="images/02.jpg"alt=""/></li> </ul> </div> <script> varlis=document.querySelectorAll("li"); varimgs=document.querySelectorAll("img"); for(vari=0;i<lis.length;i++){ //给所有的li标签添加点击事件 lis[i].onclick=function(){ //将所有的图片宽度设置为0 for(vari=0;i<lis.length;i++){ imgs[i].style.width="0px"; } //将当前点击li标签中的img标签设置宽度为220px this.querySelector("img").style.width="220px"; } } </script> </body> </html>
下载链接:H5实现手风琴
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。