zoukankan      html  css  js  c++  java
  • 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于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- 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- 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

  • 相关阅读:
    liunx挂载Ios镜像文件
    liunx下删除多个目录下的相同文件
    tomcat启动报错:Unable to complete the scan for annotations for web application [] due to a StackOverflow
    lr中controller 中scenario-> rendezvous显示灰色不可用
    liunx 下在指定文件夹下搜索字符
    python运行时提示:dot not in the path
    1.4 python 类型转换函数
    js字符串拼接
    自己写的时间轴空控件
    ios禁止页面下拉
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4072712.html
Copyright © 2011-2022 走看看