基于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 相关文章推荐
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
js中的面向对象入门
Mar 06 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
Vue2.0搭建脚手架
Mar 13 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 curl 伪造IP来源的实例代码
2012/11/01 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
javascript之锁定表格栏位
2007/06/29 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
Python列表切片操作实例总结
2019/02/19 Python
用Python写一个自动木马程序
2019/09/17 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
python中random模块详解
2021/03/01 Python
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
违反课堂纪律检讨书
2014/01/19 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书