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

頁面預(yù)覽，請點擊這里預(yù)覽：? 手風(fēng)琴預(yù)覽

案例分析：

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

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

jquery?語句

這個效果完全是對于jqueryanimate的使用，核心語句是這樣的，當(dāng)鼠標放到當(dāng) 前l(fā)i上，自己變成600寬，但是他的兄弟變成100寬，這樣，5個li的寬度一加，還是沒超過大盒子的寬度，這樣li就不會掉下來，?當(dāng)鼠標離開的時 候，所有的li再復(fù)原為原來的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>

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

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

總結(jié)

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

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