一款基于jquery的手风琴图片展示效果
jQuery 基于 图片 效果 一款 展示
2023-09-27 14:28:19 时间
今天要给大家分享一款基于jquery的手风琴图片展示效果。这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色。效果图如下:
实现的代码。
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; }
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/9889
相关文章
- jquery中实现全选按钮
- 基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
- jQuery核心语法
- 基于jQuery或Zepto的图片延迟加载插件
- 基于jQuery游戏网站焦点图轮播特效
- 基于jQuery CSS3鼠标点击动画效果
- 基于jQuery遮罩图片hover翻转效果
- 基于jQuery仿迅雷影音官网幻灯片特效
- 基于jquery右侧悬浮加入购物车代码
- 基于jQuery动画二级下拉导航菜单
- 基于jQuery左侧小图滚动右侧大图显示代码
- 一款基于jQuery轮播切换焦点图,可播放多张图片
- 基于jquery tool实现的windows桌面效果
- 基于jQuery的图片异步加载和预加载实例
- 一款基于jQuery带事件记录的日历插件
- 基于jquery多种切换效果的焦点图(兼容ie6)
- 仿照jquery封装一个自己的js库
- 【jquery Ajax 】form表单教学+评论案例
- 在ASP.NET-MVC中基于jquery的无刷新分页实现