This article illustrates the implementation method of accordion picture display based on jquery. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE html>
<title> a jquery-based accordion image display effect demo</title>
<style class= "Cp-pen-styles" >
Div
{
-moz-box-sizing:border-box;
Box-sizing:border-box;
}
HTML, body,. Page-container
{
height:100%;
Overflow:hidden;
}
. Page-container
{
-webkit-transition:padding 0.2s ease-in;
Transition:padding 0.2s ease-in;
padding:80px;
}
. page-container.opened
{
padding:0;
}
. page-container.opened. Flex-container country:not (. Active)
{
opacity:0;
-webkit-flex:0;
-ms-flex:0;
flex:0;
}
. page-container.opened. Flex-container country:not (. Active) div
{
opacity:0;
}
. page-container.opened. Flex-container. Active:after
{
-webkit-filter:grayscale (0%)! Important
Filter:grayscale (0%)! Important
}
. Flex-container
{
Display:-webkit-flex;
Display:-ms-flexbox;
Display:flex;
height:100%;
}
@media all and (max-width:900px)
{
. Flex-container
{
-webkit-flex-direction:column;
-ms-flex-direction:column;
Flex-direction:column;
}
}
. Country
{
position:relative;
-webkit-flex-grow:1;
-ms-flex-positive:1;
Flex-grow:1;
-webkit-flex:1;
-ms-flex:1;
Flex:1;
-webkit-transition:0.5s ease-in-out;
Transition:0.5s ease-in-out;
Cursor:pointer;
font-family: "Bree Serif", Serif;
Text-align:center;
Color: #fff;
font-size:22px;
text-shadow:0 0 3px #000;
}
. Country Div
{
Position:absolute;
width:100%;
Z-index:10;
top:50%;
Text-align:center;
-webkit-transition:0.1s;
Transition:0.1s;
-webkit-transform:translatey (-50%);
-ms-transform:translatey (-50%);
Transform:translatey (-50%);
-webkit-filter:none;
Filter:none;
}
. country:after
{
Content: "";
Position:absolute;
top:0;
left:0;
right:0;
bottom:0;
Background-size:cover;
-webkit-transition:0.5s ease-in-out;
Transition:0.5s ease-in-out;
-webkit-filter:grayscale (100%);
Filter:grayscale (100%);
}
. country:hover
{
-webkit-flex-grow:6;
-ms-flex-positive:6;
Flex-grow:6;
}
. country:hover:after
{
-webkit-filter:grayscale (0%);
Filter:grayscale (0%);
}
@media all and (max-width:900px)
{
. Country
{
Height:auto;
}
}
. netherlands:after
{
Background-image:url ("Netherlands.png");
Background-position:center;
}
. belgium:after
{
Background-image:url ("belgium-307_3.jpg");
Background-position:center;
}
. france:after
{
Background-image:url ("30.jpg");
Background-position:center;
}
. germany:after
{
Background-image:url ("vacation.jpg");
Background-position:center;
}
. england:after
{
Background-image:url ("england.jpg");
Background-position:center;
}
</style>
<body>
<div class= "Page-container" >
<div class= "Flex-container" >
<div class= "Country Netherlands" >
<div>
Netherlands</div>
</div>
<div class= "Country Belgium" >
<div>
Belgium</div>
</div>
<div class= "Country France" >
<div>
France</div>
</div>
<div class= "Country Germany" >
<div>
Germany</div>
</div>
<div class= "Country England" >
<div>
England</div>
</div>
</div>
</div>
<script src= ' jquery.js ' ></script>
<script>
$ ('. Country '). Click (function () {
$ (this). Toggleclass (' active ');
$ ('. Page-container '). Toggleclass (' opened ');
}); @ sourceurl=pen.js
</script>
</body>
I hope this article will help you with the jquery effect design.
