之前在慕課網上有練習手風琴效果，但是老師使用jquery簡簡單單的兩三行實現了，今天自己用js練習一下效果
*
#divbox
ulul li
ul li a
.pic1
.pic2
.pic3
.pic4
.active
js**：
var lis=document.getelementsbytagname('li'); //獲取document中的所有li
/*animate動畫*/
function ani(obj)else
},20); 20ms執行一次定時器
}for(var i=0;i
這樣就能實現手風琴效果了，但是還有一點點bug，因為li初始化的時候寬度是100px，當滑鼠移入li時，li會變為700px，但是滑鼠移開時不會按700px的寬度，仍然以100px的寬為準。如果有知道這個問題的小夥伴請大家多多指教指教。
用jquery實現非常簡單，而且效果非常好：
$(function(),1000).siblings().stop(true).animate(,1000);
});});
手風琴效果
今天寫了乙個類似手風琴的效果,基於jquer，貼出來分享，生命在於折騰，加油。function imgshowleft else 3000 imgshowleft li on mouseover function if this hasclass active imgshowleft li on m...
Vue實現手風琴效果
筆者在2年前曾用jquery寫過乙個手風琴元件，jquery提供的slideup slidedown方法簡直就是給手風琴量身定做的，不僅能夠獲得內容的高度並正確開啟，還能加上流暢的動畫效果，這裡動畫效果請小夥伴們自行腦部一下哈 然而兩年後的今天。需要在vue中來做了，筆者是對 有潔癖的人，不想使用j...
手風琴效果筆記
示例 手風琴效果 1 通過設定遮罩層透明度實現控制元素透明度 2 通過偽類實現滑鼠懸停效果 3 事件繫結方法 事件繫結方法 function bind el,eventtype,callback else if typeof el.attenchevent function 4 根據事件的冒泡原理，...