今天寫一個簡單的手風琴效果，不用插件，利用強大的jQuery，寫一個手風琴效果。

頁面預覽，請點擊這里預覽：? 手風琴預覽

案例分析：

html結構

就是一個大盒子里面放著5個li，每個li的小小是200像素，給li浮動起來，但是這里，我用一個each循環給這5個li加的背景，這樣更簡潔，當然大家也可以自己給li直接指定背景。
<div class="box">
?? ??? ?<ul>
?? ??? ??? ?<li>好多錢</li>
?? ??? ??? ?<li>好多錢</li>
?? ??? ??? ?<li>好多錢</li>
?? ??? ??? ?<li>好多錢</li>
?? ??? ??? ?<li>好多錢</li>
?? ??? ?</ul>
</div>

jquery?語句

這個效果完全是對于jqueryanimate的使用，核心語句是這樣的，當鼠標放到當 前li上，自己變成600寬，但是他的兄弟變成100寬，這樣，5個li的寬度一加，還是沒超過大盒子的寬度，這樣li就不會掉下來，?當鼠標離開的時 候，所有的li再復原為原來的200寬，這樣就完成這個案例了，詳細語句如下：
<script type="text/javascript">
?? ??? ?$(document).ready(function() {
?? ??? ??? ?$("li").each(function(index, el) {
?? ??? ??? ??? ?var inde=index+1;
?? ??? ??? ??? ?$(el).css({"background":"url("+inde+".jpg)"})
?? ??? ??? ?});
?? ??? ??? ?$("li").hover(function() {
?? ??? ??? ??? ?$(this).stop().animate({width: "600px"}, 500).siblings().stop().animate({width:"100px"}, 500)
?? ??? ??? ?}, function() {
?? ??? ??? ??? ?$("li").stop().animate({width:"202px"}, 500)
?? ??? ??? ?});
?? ??? ?});
?? ?</script>

是不是很簡單，小強零零壹 和大家一起分享。

轉載于:https://www.cnblogs.com/xiaoqiang001/p/3921374.html

總結

以上是生活随笔為你收集整理的jQuery特效手风琴特效 手写手风琴网页特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。