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

前端技术 2023/09/02 JavaScript

本文实例讲述了基于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特效设计有所帮助。

本文地址：https://www.stayed.cn/item/3514

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案