用jQuery实现信息切换展示效果

2022-09-02

网站上经常会用到各种不同风格的切换组件,特别是在企业官网上,今天VOKO的前端工程师用jQuery来实现一个信息切换展示的效果,可以根据公司实际需要来展示不同的内容,如企业分公司的相关信息,用这款就很合适。




HTML


<!-- start: region -->
<div class="region">
    <ul>
        <li>
            <div class="inner">
                <h3><span>Beijing</span><i></i></h3>
                <section>
                    <div class="t_i">
                        <div class="text">
                            <p>
                                Our bright Beijing office in Sanlitun SOHO features multiple communication spaces, a large model workshop, and a multi-purpose gallery.
                            </p>
                            <p>
                                <span>
                                    8 Gongti North Road, Sanlitun SOHO <br/>
                                    Beijing<br/>
                                    100027
                                </span>
                                <span>
                                    <a class="btn" href="#">+86(10)6029 4517</a>
                                    <a class="btn" href="#">View Map</a>
                                </span>
                            </p>
                        </div>
                        <div class="img"><i></i></div>
                    </div>
                </section>
            </div>
        </li>

        <li class="t_start t_anim delay3">
            <div class="inner">
                <h3><span>Shanghai</span><i></i></h3>
                <section>
                    <div class="t_i">
                        <div class="text">
                            <p>
                                Our Shanghai Office is located in the historic Shun Pao Building near the Bund. Established in 2020, it offers complete design services for projects throughout China.
                            </p>
                            <p>
                                <span>
                                    Unit 206 Hankou Road<br/>
                                    Shanghai<br/>
                                    200001
                                </span>
                                <span>
                                    <a class="btn" href="#">+86(21)6200 0987</a>
                                    <a class="btn" href="#">View Map</a>
                                </span>
                            </p>
                        </div>
                        <div class="img"><i></i></div>
                    </div>
                </section>
            </div>
        </li>

        <li class="t_start t_anim delay5">
            <div class="inner">
                <h3><span>Shenzhen</span><i></i></h3>
                <section>
                    <div class="t_i">
                        <div class="text">
                            <p>
                                Since 2022, our Shenzhen office services a growing number of projects in the city and the Greater Bay Area. 
                            </p>
                            <p>
                                <span>
                                    No. 18 Zimao West Street, Qianhai<br/>
                                    Shenzhen<br/>
                                    518000
                                </span>
                                <span>
                                    <a class="btn" href="#">+86(10)7642 0028</a>
                                    <a class="btn" href="#">View Map</a>
                                </span>
                            </p>
                        </div>
                        <div class="img"><i></i></div>
                    </div>
                </section>
            </div>
        </li>
    </ul>
</div>
<!-- end: region -->


CSS


/* region */
.region {padding:150px 40px;}
.region ul {}
.region li {position:relative; padding:40px; border-top:2px solid #000000;}
.region li::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:0; background:#000000; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}
.region li .inner {overflow:hidden;}
.region li h3 {position:relative; z-index:2; font-size:100px; display:flex; justify-content:space-between; align-items:center;}
.region li h3 span {display:inline-block; position:relative; z-index:1; width:calc(100% - 60px); transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}
.region li h3 i {display:block; width:40px; height:40px; position:relative; right:-10px; top:50%; transition: all 0.3s ease-out 0s;}
.region li h3 i:before {content:""; position:absolute; z-index:1; left:0; right:0; top:0; bottom:0; margin:auto; width:14px; height:3px; background:#000000; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}
.region li h3 i:after {content:""; position:absolute; z-index:1; left:0; right:0; top:0; bottom:0; margin:auto; width:3px; height:14px; background:#000000; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}
.region li h3 i.arrow_rotate {transform:rotate(45deg);}
.region li section {height:0; transition:all 0.3s ease 0s;}
.region li section .t_i {width:100%; height:0; display:flex; justify-content:space-between; align-items:flex-end; transition:height 1s ease 0s; -moz-transition:height 1s ease 0s; -webkit-transition:height 1s ease 0s;}
.region li section .text {width:50%; opacity:0; position:relative; z-index:1; margin-top:60px; padding:0 40px 0 0; transform:translateY(-20px); transition:none;}
.region li section .text p {font-size:32px; line-height:1.4;}
.region li section .text p:nth-child(2) {display:flex; flex-wrap:wrap; margin-top:40px; padding:20px; font-size:18px; color:#000000; line-height:1.6; background:#FFFFFF;}
.region li section .text p:nth-child(2) span {width:50%;}
.region li section .text p:nth-child(2) span:nth-child(2) {display:flex; flex-direction:column; align-items:flex-end; justify-content:space-around;}
.region li section .text p:nth-child(2) span:nth-child(2) a {font-weight:bold; color:#000000;}
.region li section .img {position:relative; width:50%; opacity:0; position:relative; z-index:2; transition:all 0.3s ease 0s;}
.region li section .img i {display:block; width:100%; position:absolute; left:0; bottom:0; background-position:center center; background-repeat:no-repeat; background-size:cover;}
.region li section .img i::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000000; transition:all 1s ease 0.5s;}
.region li:nth-child(1) section .img i {background-image:url('region_1.png');}
.region li:nth-child(2) section .img i {background-image:url('region_2.png');}
.region li:nth-child(3) section .img i {background-image:url('region_3.png');}
/* is_hover */
.region li.is_hover::after {height:100%;}
.region li.is_hover h3 span {color:#FFFFFF;}
.region li.is_hover h3 i:before,
.region li.is_hover h3 i:after {background:#FFFFFF;}
/* is_open */
.region li.is_open::after {height:100%;}
.region li.is_open h3 {background:#000000;}
.region li.is_open h3 span {color:#FFFFFF;}
.region li.is_open section {}
.region li.is_open section .text {opacity:1; color:#FFFFFF; transform:translateY(0); transition:all 1s ease 0.5s;}
.region li.is_open section .img {opacity:1; transition:all 0s ease 0.5s;}
.region li.is_open section .img i::after {transform:translateY(100%);}


JavaScript


// region
function fun_region_zoom() {

    var li = $('.region li');
    var h3 = $('.region li h3');
    var section = $('.region li section');
    var t_i = $('.region li section .t_i');
    var img = $('.region li section .img');
    var i = $('.region li section .img i');

    //
    t_i.css({
        "height":i.width()*0.75 - h3.height()
    });
    i.css({
        "height":i.width()*0.75,
    });

    //
    li.hover(function(){
        $(this).addClass('is_hover');
    },function(){
        $(this).removeClass('is_hover');
    });

    //
    li.click(function (event) {
        // 收起
        if ($(this).hasClass('is_open')) {
            $(this).removeClass("is_open");
            section.css({"height":0});
        }
        // 展开 
        else {
            li.removeClass("is_open");
            $(this).addClass("is_open");
            section.css({"height":0});
            $(this).find('section').css({"height":i.width()*0.75 - h3.height()});
        }
});

}
//
fun_region_zoom ();
$(window).bind('resize', function (){
    fun_region_zoom();
});