jQuery實現(xiàn)手風琴特效
更新時間：2021年01月11日 07:39:54 作者：劉劉劉code
這篇文章主要為大家詳細介紹了前端js實現(xiàn)手風琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)手風琴的具體代碼，供大家參考，具體內(nèi)容如下
運用jQuery效果（功能如下）：
代碼（鏈式編程）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery-3.4.1.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.king {
width: 852px;
margin: 100px auto;
background: url(../images/bg.png) no-repeat;
overflow: hidden;
padding: 10px;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.king li.current {
width: 224px;
}
.king li.current .big {
display: block;
}
.king li.current .small {
display: none;
}
.big {
width: 224px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="king">
<ul>
<li class="current">
<a href="#" >
<img src="../images/m1.jpg" alt="" class="small">
<img src="../images/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/l1.jpg" alt="" class="small">
<img src="../images/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/c1.jpg" alt="" class="small">
<img src="../images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/w1.jpg" alt="" class="small">
<img src="../images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/z1.jpg" alt="" class="small">
<img src="../images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/h1.jpg" alt="" class="small">
<img src="../images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/t1.jpg" alt="" class="small">
<img src="../images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
<script>
$(function() {
//1.鼠標經(jīng)過小li有兩步操作：當前小li的寬度變?yōu)?25px，同時里面的小圖片淡出，大圖片淡入
//2.其余兄弟元素小li寬度變?yōu)?9px，小圖片淡入，大圖片淡出
$(".king li").mouseenter(function() {
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript偏函數(shù)與柯里化,結(jié)合實例形式詳細分析了JavaScript偏函數(shù)與柯里化的概念、原理、定義、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-03-03
這篇文章我們來看看如何利用原生的JavaScript實現(xiàn)統(tǒng)計文本的行數(shù)，代碼實現(xiàn)起來很簡單，有需要的可以參考借鑒。2016-08-08
typescript返回值類型和參數(shù)類型的具體使用
本文主要介紹了typescript返回值類型和參數(shù)類型的具體使用文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
javascript循環(huán)鏈表之約瑟夫環(huán)的實現(xiàn)方法
這是一道比較經(jīng)典的循環(huán)鏈表問題，在華為上機筆試中也出現(xiàn)過。 約瑟夫環(huán)是一個數(shù)學(xué)的應(yīng)用問題，下面這篇文章主要就給大家介紹了javascript循環(huán)鏈表之約瑟夫環(huán)的實現(xiàn)方法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
代碼塊高亮可復(fù)制顯示js插件highlight.js+clipboard.js整合
最近有個需求是將jsp頁面上的某一段代碼塊格式化成類似CSDN的代碼塊的樣式，而且很多平臺都使用了這樣的功能，下面就為大家簡單分享一下2021-02-02
JavaScript編程設(shè)計模式之觀察者模式(Observer Pattern)實例詳解
這篇文章主要介紹了JavaScript編程設(shè)計模式之觀察者模式(Observer Pattern),簡單說明了觀察者模式的概念、原理并結(jié)合實例形式詳細給出了觀察者模式的相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了自制微信公眾號一鍵排版工具的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了JavaScript中的數(shù)學(xué)運算介紹,本文先是講解了數(shù)學(xué)運算的一些知識,然后給出了操作實例,需要的朋友可以參考下2014-12-12
js實現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的3種方式舉例
在JavaScript中將圖片的絕對路徑轉(zhuǎn)換為base64字符串或blob對象,是常見的圖片上傳前的預(yù)處理步驟,這篇文章主要介紹了js實現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的3種方式,需要的朋友可以參考下2025-04-04
JavaScript實現(xiàn)簡單精致的圖片左右無縫滾動效果
這篇文章主要介紹了JavaScript實現(xiàn)簡單精致的圖片左右無縫滾動效果,涉及javascript結(jié)合時間函數(shù)動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2017-03-03