簡單實現(xiàn)jQuery手風琴效果
更新時間：2017年08月18日 09:47:11 作者：-懶洋洋
這篇文章主要教大家如何簡單實現(xiàn)jQuery手風琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)手風琴效果的具體代碼，供大家參考，具體內(nèi)容如下
js代碼：
<script type="text/javascript" src="jquery-3.0.0.js"></script>
<script type="text/javascript">
$(function() {
//獲取所有l(wèi)i遍歷
$(".li_list").each(function() {
//當鼠標進去當前l(fā)i
$(this).mouseenter(function() {
//設(shè)置當前元素寬度
$(this).stop()
.animate({ "width": "600px" }, 500, "linear");
//設(shè)置同胞元素寬度
.siblings().stop()
.animate({ "width": "100px" }, 500, "linear");
});
});
});
</script>
css代碼：
.li_list {
width: 100px;
height: 300px;
list-style: none;
float: left;
overflow: hidden;
}
.li_list img {
width: 100%;
height: 100%;
}
.divbg {
width: 600px;
height: 300px;
background: rgba(230, 0, 0, 0.5);
text-align: center;
line-height: 300px;
float: left;
}
.divbg span {
display: block;
width: 100px;
height: 300px;
float: left;
}
.div1 {
width: 500px;
height: 300px;
float: left;
}
.mo{
width: 600px;
}
html代碼：
<ul class="ul_list">
<li class="li_list">
<div class="divbg">
<span>萌寵</span>
<div class="div1">
<img src="img/0.jpg" />
</div>
</div>
</li>
<li class="li_list">
<div class="divbg">
<span>萌寵</span>
<div class="div1">
<img src="img/1.jpg" />
</div>
</div>
</li>
<li class="li_list">
<div class="divbg">
<span>萌寵</span>
<div class="div1">
<img src="img/2.jpg" />
</div>
</div>
</li>
<li class="li_list mo">
<div class="divbg">
<span>萌寵</span>
<div class="div1">
<img src="img/3.jpg" />
</div>
</div>
</li>
</ul>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了認識jQuery的Promise的具體使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了jquery.cookie.js使用方法，非常的全面，這里推薦給有需要的小伙伴。2015-01-01
jquery封裝插件時匿名函數(shù)形參和實參的寫法解釋
本文主要介紹了jquery封裝插件時匿名函數(shù)形參和實參的寫法解釋。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
一個關(guān)于jquery星級插件的博文，那是我從網(wǎng)上收集的，它只支持一個頁面中使用一次，多次使用的話會發(fā)生沖突，達不到我項目的需求，沒辦法，只能修改它2012-03-03
這篇文章主要介紹了jQuery實現(xiàn)的輸入框選擇時間插件用法,實例分析了jQuery插件jquery.settime.js的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
jquery動態(tài)創(chuàng)建div與input的實例代碼
下面小編就為大家?guī)硪黄猨query動態(tài)創(chuàng)建div與input的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
jQuery的事件模塊是較復雜的，前面僅僅提到了對事件對象的包裝。即統(tǒng)一了一些兼容性的問題。這篇會綜述下jQuery的整個事件模塊。2011-06-06
第一次用JSON作為jquery異步請求的傳輸對象，結(jié)果在jquery請求后返回的結(jié)果是字符串還是json對象上折騰了半天。等到問題解決了，也大致明白怎么個意思了，歸根結(jié)底還是對jquery對相關(guān)json對象獲取的理解有所偏差。2009-07-07
今天要為大家紹一款由jquery實現(xiàn)的鼠標單擊出現(xiàn)水波特效。用鼠標點擊頁面,你可以看到頁面不斷出面水波紋效果。然后水波紋漸漸消失。效果非常不錯2016-04-04
這篇文章主要介紹了JQuery包裹DOM節(jié)點的方法,實例分析了wrap與wrapAll方法實現(xiàn)包裹DOM節(jié)點的技巧與相關(guān)注意事項,需要的朋友可以參考下2015-06-06