簡單實現(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() {
//設置當前元素寬度
$(this).stop()
.animate({ "width": "600px" }, 500, "linear");
//設置同胞元素寬度
.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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
根據(jù)國外科技網(wǎng)站 W3Techs 一項調(diào)查了近100萬個網(wǎng)站數(shù)據(jù)顯示，jQuery是目前最流行的 JavaScript 庫。2011-04-04
這篇文章主要介紹了jQuery焦點圖輪播插件KinSlideshow用法,結(jié)合實例形式較為詳細的分析了jQuery焦點圖輪播插件KinSlideshow的參數(shù)含義與使用方法,需要的朋友可以參考下2016-06-06
JQuery實現(xiàn)表格數(shù)據(jù)行上移與下移
這篇文章主要為大家詳細介紹了JQuery實現(xiàn)表格數(shù)據(jù)行上移與下移，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
JQuery事件委托(適用于給動態(tài)生成的腳本元素添加事件)
jq寫了點擊事件，是通過獲取元素的類名被點擊后執(zhí)行對應方法，但是研發(fā)套完模板，他會把所有的結(jié)構(gòu)先清空，導致jq根本找不到那個元素，所以事件就不得執(zhí)行了,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了jQuery實現(xiàn)的頁面彈幕效果,涉及jQuery事件響應與頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了jquery單擊文字或圖片內(nèi)容放大并居中顯示，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
jQuery中的鏈式操作，它讓代碼變得更有層次更簡潔，所以這篇文章主要給大家介紹了關于jQuery鏈式編程風格的相關資料,需要的朋友可以參考下2021-06-06
這篇文章主要為大家詳細介紹了jquery實現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
JQuery是一個快速的，簡潔的JavaScript庫，使用戶能更方便地處理HTML documents、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。2015-05-05
jQuery:節(jié)點(插入,復制,替換,刪除)操作，需要的朋友可以參考一下2013-03-03