本文分享了純js+html製作手風琴和純css+html製作手風琴兩種效果，供大家參考，具體內容如下
一、純css+html的手風琴效果
這種用css寫的手風琴比較簡單，主要是應用到css中的，transition屬性。
代碼如下：
<!DOCTYPE HTML><html><head><style>body{background: url('bg.gif') repeat;}ul,li,p{margin: 0px;padding: 0px;list-style: none;} #div{width: 1180px;height: 405px;border:5px solid #ccc;padding: 0px;margin: 0px auto;overflow: hidden;} .list{width: 3200px;} .list li{float: left;width: 170px;height: 500px;;position: relative; -moz-transition:width 2s; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }.list:hover li{width: 107px;}.list li:hover{width: 538px;}.list li p{width: 100%;height: 100%;opacity: 0.5;position: absolute;top: 0px;left: 0px;background: black; }.list li:hover p{opacity:0}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript"></script></head><body ><div id="div"> <ul class="list"> <!--如果設定父級與子級之間沒有空隙的話，將margin和padding設為0即可--> <li><img src="image/1.jpg" style="width:538px;height:405px;"><p></p></li> <li><img src="image/2.jpg" style="width:538px;height:405px;"><p></p></li> <li><img src="image/3.jpg" style="width:538px;height:405px;"><p></p></li> <li><img src="image/4.jpg" style="width:538px;height:405px;"><p></p></li> <li><img src="image/5.jpg" style="width:538px;height:405px;"><p></p></li> <li><img src="image/6.jpg" style="width:538px;height:405px;"><p></p></li> <li><img src="image/7.jpg" style="width:538px;height:405px;"><p></p></li> </ul></div></body></html>
二、純js+html製作手風琴
這個手風琴出現一個問題，就是單獨移動每個li時，沒問題，但是當移動很快時，最右邊的li出現空隙。我感覺是定時器的問題，就是當每個li還沒回到自己的位置時，下一個li就開始運動了。但我定時器已經關了啊。
麻煩哪位給我留言，幫我看看怎麼改哈！
代碼如下：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>手風琴效果</title><link href="style.css" rel="stylesheet" type="text/css" /><script src="perfectMove2.js"></script><script type="text/javascript">window.onload=function(){ var oDiv=document.getElementById('show1'); var iMinWidth=9999999; var aLi=oDiv.getElementsByTagName('li'); var aSpan=oDiv.getElementsByTagName('span'); var i=0; var bool=false; for(i=0;i<aLi.length;i++) { aSpan[i].index=i; aSpan[i].onmouseover=function () { for(i=0;i<aLi.length;i++) { startMove(aLi[i],{width:this.offsetWidth});//調用運動函數 bool=true; } if(bool) { startMove(aLi[this.index],{width:552}); } } }};</script></head><body><div id="show1"> <ul> <li class="active"> <span class="bg0">這是第一個</span> <img src="images/1.jpg" /> </li> <li > <span class="bg1">這是第二個</span> <img src="images/2.jpg" /> </li> <li > <span class="bg2">這是第三個</span> <img src="images/3.jpg" /> </li> <li> <span class="bg3">這是第四個</span> <img src="images/4.jpg" /> </li> <li> <span class="bg4">這是第五個</span> <img src="images/5.jpg" /> </li> <li> <span class="bg5">這是第六個</span> <img src="images/6.jpg" /> </li> </ul></div></body></html>
perfectMove2.js代碼如下：
function getStyle(obj,attr)//用此種方法擷取樣式中的屬性{ if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; }}function startMove(obj,json,fn){ clearInterval(obj.timer);//清除定時器 obj.timer=setInterval(function () { var stop=true; for(var attr in json) { var iCur=0; if(attr=='opacity') { iCur=parseInt(parseFloat(getStyle(obj, attr))*100);//這裡加parseInt是避免div的數值不穩定，在波動 } else { iCur=parseInt(getStyle(obj, attr)); } var iSpeed=(json[attr]-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur!=json[attr]) { stop=false; } if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100; } else { obj.style[attr]=iCur+iSpeed+'px'; } } if(stop) { clearInterval(obj.timer); if(fn){fn();} } }, 30) }
以上就是本文的全部內容，希望對大家學習javascript程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
