一款基于jquery的手风琴图片展示效果
2014-11-03 00:00
896 查看
今天要给大家分享一款基于jquery的手风琴图片展示效果。这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
css代码:
注:本文爱编程原创文章,转载请注明原文地址:/article/1211655.html
在线预览 源码下载
实现的代码。
html代码:
<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>
css代码:
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; }
注:本文爱编程原创文章,转载请注明原文地址:/article/1211655.html
相关文章推荐
- 一款基于jquery的手风琴图片展示效果
- 基于jquery的手风琴图片展示效果实现方法
- 基于jquery的手风琴图片展示效果实现方法
- 一张图片 点击鼠标放大,再点缩小 ( 基于jquery1.8.3), 另外推荐一款插件:lightBox...效果不错。
- 分享一款基于jqery的带3D切换效果的图片展示
- 一款基于jQuery和CSS3的图片层叠效果插件(附源码)
- 基于jquery的图片展示--卡牌翻转效果
- 基于jquery的图片展示--卡牌翻转效果
- jQuery实例:图片展示效果
- jquery 简单的图片展示效果
- 基于Jquery的仿照flash放大图片效果代码
- jquery picswitch图片焦点图展示效果
- 一个基于jQuery的图片翻转效果
- JQUERY演示图片上下滑动展示效果
- 基于jquery的仿百度的鼠标移入图片抖动效果
- 基于jquery实现的上传图片及图片大小验证、图片预览效果代码
- 一个基于jquery的图片切换效果
- flashSlider——基于Jquery的图片展示插件
- 基于JQuery的实现图片轮播效果(焦点图)
- jQuery实例:图片展示效果