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
Preface In order to follow the conventional WEB l...
1. Introduction When the amount of data in the da...
In Vue, we generally have front-end and back-end ...
This article example shares the specific code of ...
Table of contents 1. Overview 2. Define a simple ...
Disable right-click menu <body oncontextmenu=s...
Let me first talk about the implementation steps:...
background Before we know it, a busy year is comi...
Today, when I was looking at the laboratory proje...
In order to efficiently meet requirements and avo...
1. Prerequisites 1. The project has been deployed...
Browser compatibility is nothing more than style ...
MySQL replication table detailed explanation If w...
<br />Related articles: Web skills: Multiple...
This article explains the difference between arro...