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

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

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

index.html页面代码如下：复制代码代码如下：DOCTYPE html html class=' head title一款基于jquery的手风琴图片展示效果演示/标题样式=' CP-pen-style ' div {-moz-box-size :边框-盒子；盒子尺寸：边框盒子；} html，正文，页面容器{身高： 100%；飞越：隐藏；} .page-container {-web kit-transit :填充0.2s简易版；过渡：填充0.2s轻松进入；padding: 80px }。页面容器。打开{ padd : 0；} .页面容器。已打开flex-container .country:not(.活跃){ opa city 3360 0；-web套件-flex : 0；-ms-flex : 0；flex : 0；} .页面容器。已打开flex-container .country:not(.active)div { opa city 3360 0；} .页面容器。已打开柔性容器。{-网络套件-过滤器：后激活：灰度(0%)!重要；过滤器：灰度(0%)!重要；} .flex-container { display :-web kit-flex；显示器：-ms-flex盒；显示： flex高度： 100%;} @ media all and(最大宽度： 900 px){ .flex-container {-web套件-flex-direction :列；-ms-flex-direction:色谱柱；弯曲方向：柱；} } .国家{位置：相对；-web套件-flex-grow : 1；-ms-flex-正极： 1；flex-grow : 1；-web套件-flex : 1；-ms-flex : 1；flex : 1；-WebKit-transit : 0.5s轻松进出；过渡： 0.5秒轻松进出；光标：指针；font-family: 'Bree Serif '，衬线；文本对齐：中心；color : # ffffont-size : 22px；文本-阴影： 0 3px # 000} .国家/地区{职位：绝对值；宽度： 100%;z指数： 10；前：名50%；文本对齐：中心；-web套件-transit : 0.1s；transit : 0.1s-web套件-transit : translateY(-50%)；-ms-transform : translateY(-50%)；transform : translateY(-50%)；-webkit-filter:无；过滤器：无；} .国家：在{内容： }之后；绝对位置：top : 0；左： 0；右： 0；底部： 0；背景尺寸：封面；-WebKit-transit : 0.5s轻松进出；过渡： 0.5秒轻松进出；-webkit-filter:灰度(100%);过滤器：灰度(100%);} .country : hover {-web kit-flex-grow : 6；-ms-flex-阳性： 6；flex-grow : 6；} .国家：悬停：after { -webkit-filter:灰度(0%);过滤器：灰度(0%);} @ media all and(最大宽度： 900 px){ .国家{ height: auto} }。{背景图像： URL('后的荷兰：尼德兰。png ')；背景-位置：中心；} .{背景图像： URL后的比利时：('比利时-307 _ 3。jpg’)；背景-位置：中心；} .{背景图像： URL(' 30)后的法国：jpg’)；背景-位置：中心；} .{背景图像： URL('后的德国：休假。jpg’)；背景-位置：中心；} .{背景图像： URL后的英格兰：('英格兰。jpg’)；背景-位置：中心；}/style/head body div class=' page-container ' div class=' flex-container ' div class=' country荷兰差异荷兰/div/div class=' country比利时差异比利时/div/div class=' country法国差异法国/div/div class=' country德国差异德国/div/div class=' country英格兰差异英格兰/div /div /div脚本src=' jquery。js /脚本脚本$()。国家')。单击(function () { $(this)).切换类(“活动的”)；$('.页面容器')。切换类(“打开”)；});//@ SourceURl=pen。js/脚本/正文/html

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

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