html风琴图片展示,基于jquery的手风琴图片展示效果实现方法

本文实例讲述了基于jquery的手风琴图片展示效果实现方法。分享给大家供大家参考。具体实现方法如下：

代码运行效果如下图所示：

index.html页面代码如下：

一款基于jquery的手风琴图片展示效果demo

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;

}

Netherlands

Belgium

France

Germany

England

$('.country').click(function () {

$(this).toggleClass('active');

$('.page-container').toggleClass('opened');

}); //@ sourceURL=pen.js

完整实例代码点击此处本站下载。

希望本文所述对大家的jQuery特效设计有所帮助。