javascript代码实例教程-基于jquery的手风琴图片展示效果实现方法_js

上一篇: javascript代码实例教程-JavaScr... 下一篇:javascript代码实例教程-基于Boo...

javascript代码实例教程-基于jquery的手风琴图片展示效果实现方法

发布时间：2018-12-29 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-基于jquery的手风琴图片展示效果实现方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

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

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

index.htML页面代码如下：

代码如下:

<!DOCTYPE html>
<html class=''>
<head>
    <tITle>一款基于jquery的手风琴图片展示效果demo</title>
    <style class="cp-pen-styles">
        p
        {
            -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) p
        {
            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;
       nbsp;     font-family: "bree Serif" , serif;
            text-align: center;
            color: #fff;
            font-Size: 22px;
            text-shadow: 0 0 3px #000;
        }
        .country p
        {
            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>
    <p class="page-container">
        <p class="flex-container">
            <p class="country netherlands">
                <p>
                    Netherlands</p>
            </p>
            <p class="country belgium">
                <p>
                    Belgium</p>
            </p>
            <p class="country france">
                <p>
                    France</p>
            </p>
            <p class="country germany">
                <p>
                    Germany</p>
            </p>
            <p class="country england">
                <p>
                    England</p>
            </p>
        </p>
    </p>
    <script src='jquery.js'></script>
    <script>
        $('.country').click(function () {
            $(this).toggleClass('active');
            $('.page-container').toggleClass('opened');
        }); //@ sourceURL=pen.js
    </script>
</body>
</html>

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

觉得可用，就经常来吧！脚本宝典欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-基于jquery的手风琴图片展示效果实现方法全部内容，希望文章能够帮你解决javascript代码实例教程-基于jquery的手风琴图片展示效果实现方法所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Class flex flex HTML Import jQuery jQuery post-format-gallery this

上一篇: javascript代码实例教程-JavaScr... 下一篇:javascript代码实例教程-基于Boo...

猜你在找的js相关文章

全站导航更多