[01] accordion effect implementation, 01 accordion implementation
Idea: select several images. CSS write style.
The effect process is that when the mouse overwrites the image, the width of the image increases. The image width of other brothers is reduced. The effect is as follows:
See the Pen EVLWQN by moyu (@ MoYu1991) on CodePen.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> jQuery horizontal accordion image DEMO </title> <link href =" css/style.css "type =" text/css "rel =" stylesheet "/> <script type =" text/javascript "src =" js/jquery. min. js "> </script>
The CSS code is as follows:
@ Charset "UTF-8"; * {margin: 0px; padding: 0px; font-family: ""; font-size: 12px; text-decoration: none; list-style-type: none;} img {border: 0px;}/* start */. flash4 {width: 1180px; height: pixel PX; margin: 0 pxauto; margin-bottom: 20px; position: relative ;}. flash4 ul li {width: pixel PX; height: pixel PX; border-left: 1px solid #000; position: relative; overflow: hidden; float: left ;}. flash4 ul li. imgTop img {opacity: 0.4 ;}. flash4 ul li. imgTop img. tm {opacity: 1 ;}. flash4 ul li. imgCon {width: 538px; height: 405px ;}. flash4 ul li. imgCen {width: 538px; height: 50px; background: rgba (0.5, 0,); color: # fff; font-size: 20px; line-height: 50px; position: absolute; left: 0px; bottom: 45px; text-indent: 20px; display: none ;}. flash4 ul li. imgBot {width: 538px; height: 45px; background: #222 ;}. flash4 ul li. imgBot p. bt_1 {width: 80px; line-height: 45px; font-size: 16px; color: # fff; text-indent: 20px; float: left ;}. flash4 ul li. imgBot p. bt_2 {width: 458px; height: 45px; line-height: 45px; float: left; display: none ;}. flash4 ul li. imgBot p. bt_2 span {font-size: 14px; color: # fff; padding-right: 30px; background: url (.. /images/part2_icon.png) no-repeat left center; padding-left: 10px ;}. flash4 ul li. first {width: 538px ;}. flash4 ul li. last {position: absolute; right: 0px; bottom: 0px ;}
JQuery code:
// Var index7 = 0 for the accordion animation effect; // defines the variable and assigns a value of 0; $ (". flash4 ul li "). mouseenter (function () {index7 = $ (this ). index (); $ (this ). stop (). animate ({width: 538}, 500 ). siblings ("li "). stop (). animate ({width: 106}, 500); $ (". imgCen ").eq(index7).css (" display "," block "). siblings (". imgCen ").css (" display "," none "); $ (" p. bt_2 "2.16.eq(index72.16.css (" display "," block "). siblings ("p. bt_2 ").css (" display "," none "); $ (". imgTop img "). eq (index7 ). addClass ("tm "). siblings (". imgTop img "). removeClass ("tm") ;}; $ (". flash4 ul li "). mouseleave (function () {$ (this ). eq (index7 ). stop (). animate ({width: 538}, 500); $ (". imgCen ").css (" display "," none "); $ (" p. bt_2 ").css (" display "," none ");});
Complete demo download