jQuery implements accordion effects
|
This article shares the specific code of jQuery to implement accordion for your reference. The specific content is as follows Use jQuery effects (functions as follows):
Code (chain programming):
<!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. When the mouse passes over the small li, there are two steps: the width of the current small li becomes 225px, and the small picture inside fades out, and the large picture fades in. //2. The width of the remaining brother elements small li becomes 69px, the small picture fades in, and the large picture fades out. $(".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>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: iview implements dynamic form and custom verification time period overlap
>>: jQuery realizes the full function of shopping cart
Recommend
CSS clicks on the radio to switch between two image styles and only one of the multiple radios can be checked
We implement a red image style for the clicked bu...
js handles account logout when closing the browser
Table of contents Classic approach question Furth...
The effect of zooming in on a Taobao store is similar to the principle of using a slideshow.
Today I got familiar with the mouse zooming effect...
Solve the problem of MySQL Threads_running surge and slow query
Table of contents background Problem Description ...
Examples of the correct way to use AES_ENCRYPT() and AES_DECRYPT() to encrypt and decrypt MySQL
Preface Recently, I encountered a requirement at ...
How to implement a binary search tree using JavaScript
One of the most commonly used and discussed data ...
Notes on MySQL case sensitivity
Table of contents MySQL case sensitivity is contr...
Example code for CSS pseudo-classes to modify input selection style
Note: This table is quoted from the W3School tuto...
56 practical JavaScript tool functions to help you improve development efficiency
Table of contents 1. Digital Operation (1) Genera...
CSS uses the placeholder-shown pseudo-class to achieve the floating text effect of the input box
In this post, we’ll use the :placeholder-shown ps...
The difference between animation and transition
The difference between CSS3 animation and JS anim...
Play with the connect function with timeout in Linux
In the previous article, we played with timeouts ...
Mobile development tutorial: Summary of pixel display issues
Preface I believe that in the process of mobile t...
Detailed explanation of adding dotted lines to Vue element tree controls
Table of contents 1. Achieve results 2. Implement...
Solution to MySQL being unable to start due to excessive memory configuration
Problem Description MySQL reports an error when s...