今天寫(xiě)一個(gè)簡(jiǎn)單的手風(fēng)琴效果，不用插件，利用強(qiáng)大的jQuery，寫(xiě)一個(gè)手風(fēng)琴效果。

頁(yè)面預(yù)覽，請(qǐng)點(diǎn)擊這里預(yù)覽：? 手風(fēng)琴預(yù)覽

案例分析：

html結(jié)構(gòu)

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

jquery?語(yǔ)句

這個(gè)效果完全是對(duì)于jqueryanimate的使用，核心語(yǔ)句是這樣的，當(dāng)鼠標(biāo)放到當(dāng) 前l(fā)i上，自己變成600寬，但是他的兄弟變成100寬，這樣，5個(gè)li的寬度一加，還是沒(méi)超過(guò)大盒子的寬度，這樣li就不會(huì)掉下來(lái)，?當(dāng)鼠標(biāo)離開(kāi)的時(shí) 候，所有的li再?gòu)?fù)原為原來(lái)的200寬，這樣就完成這個(gè)案例了，詳細(xì)語(yǔ)句如下：
<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>

是不是很簡(jiǎn)單，小強(qiáng)零零壹 和大家一起分享。

轉(zhuǎn)載于:https://www.cnblogs.com/xiaoqiang001/p/3921374.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。