快捷導(dǎo)航

jQuery實(shí)現(xiàn)手風(fēng)琴特效

更新時(shí)間：2021年01月11日 07:39:54 作者：劉劉劉code

這篇文章主要為大家詳細(xì)介紹了前端js實(shí)現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)手風(fēng)琴的具體代碼，供大家參考，具體內(nèi)容如下

運(yùn)用jQuery效果（功能如下）：

代碼（鏈?zhǔn)骄幊蹋?/p>

<!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.鼠標(biāo)經(jīng)過小li有兩步操作：當(dāng)前小li的寬度變?yōu)?25px，同時(shí)里面的小圖片淡出，大圖片淡入
//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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript偏函數(shù)與柯里化實(shí)例詳解
這篇文章主要介紹了JavaScript偏函數(shù)與柯里化,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript偏函數(shù)與柯里化的概念、原理、定義、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-03-03
用原生js統(tǒng)計(jì)文本行數(shù)的簡(jiǎn)單示例
這篇文章我們來看看如何利用原生的JavaScript實(shí)現(xiàn)統(tǒng)計(jì)文本的行數(shù)，代碼實(shí)現(xiàn)起來很簡(jiǎn)單，有需要的可以參考借鑒。
2016-08-08
typescript返回值類型和參數(shù)類型的具體使用
本文主要介紹了typescript返回值類型和參數(shù)類型的具體使用文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
javascript循環(huán)鏈表之約瑟夫環(huán)的實(shí)現(xiàn)方法
這是一道比較經(jīng)典的循環(huán)鏈表問題，在華為上機(jī)筆試中也出現(xiàn)過。約瑟夫環(huán)是一個(gè)數(shù)學(xué)的應(yīng)用問題，下面這篇文章主要就給大家介紹了javascript循環(huán)鏈表之約瑟夫環(huán)的實(shí)現(xiàn)方法，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-01-01
代碼塊高亮可復(fù)制顯示js插件highlight.js+clipboard.js整合
最近有個(gè)需求是將jsp頁(yè)面上的某一段代碼塊格式化成類似CSDN的代碼塊的樣式，而且很多平臺(tái)都使用了這樣的功能，下面就為大家簡(jiǎn)單分享一下
2021-02-02
JavaScript編程設(shè)計(jì)模式之觀察者模式(Observer Pattern)實(shí)例詳解
這篇文章主要介紹了JavaScript編程設(shè)計(jì)模式之觀察者模式(Observer Pattern),簡(jiǎn)單說明了觀察者模式的概念、原理并結(jié)合實(shí)例形式詳細(xì)給出了觀察者模式的相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下
2017-10-10
自制微信公眾號(hào)一鍵排版工具
這篇文章主要介紹了自制微信公眾號(hào)一鍵排版工具的相關(guān)資料,需要的朋友可以參考下
2016-09-09
JavaScript中的數(shù)學(xué)運(yùn)算介紹
這篇文章主要介紹了JavaScript中的數(shù)學(xué)運(yùn)算介紹,本文先是講解了數(shù)學(xué)運(yùn)算的一些知識(shí),然后給出了操作實(shí)例,需要的朋友可以參考下
2014-12-12
js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的3種方式舉例
在JavaScript中將圖片的絕對(duì)路徑轉(zhuǎn)換為base64字符串或blob對(duì)象,是常見的圖片上傳前的預(yù)處理步驟,這篇文章主要介紹了js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的3種方式,需要的朋友可以參考下
2025-04-04
JavaScript實(shí)現(xiàn)簡(jiǎn)單精致的圖片左右無縫滾動(dòng)效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單精致的圖片左右無縫滾動(dòng)效果,涉及javascript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下
2017-03-03