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


Posted in Javascript onDecember 16, 2014

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

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

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

index.html页面代码如下:

<!DOCTYPE html>

<html class=''>

<head>

    <title>一款基于jquery的手风琴图片展示效果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>

</head>

<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>

</html>

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

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

Javascript 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
node.js中的fs.lchownSync方法使用说明
Dec 16 #Javascript
node.js中的fs.lchown方法使用说明
Dec 16 #Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 #Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 #Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 #Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 #Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 #Javascript
You might like
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php验证码生成代码
2015/11/11 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
学习Vue组件实例
2018/04/28 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python skimage 连通性区域检测方法
2018/06/21 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python中dict()的高级用法实现
2019/11/13 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
python爬虫容易学吗
2020/06/02 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
.net软件工程师面试题
2015/03/31 面试题
应届硕士毕业生自荐信
2014/05/26 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
土建技术员岗位职责
2015/04/11 职场文书
周一给客户的问候语
2015/11/10 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
linux下安装redis图文详细步骤
2021/12/04 Redis