手风琴效果

最新推荐文章于 2024-02-13 10:34:45 发布

Emma_Maria

最新推荐文章于 2024-02-13 10:34:45 发布

阅读量969

点赞数 2

分类专栏：小效果集锦文章标签：手风琴

本文链接：https://blog.csdn.net/Emma_Maria/article/details/80284774

版权

小效果集锦专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天写了一个类似手风琴的效果,基于jQuer，贴出来分享，生命在于折腾，加油。

function imgShowleft(){
            var timers=setInterval(function(){
                var t=$(".active");
                if(t.index()===2){
                    t.removeClass("active");
                    $("#imgShowleft > li").eq(0).addClass("active");
                }else{
                    t.removeClass("active");
                    t.next().addClass("active");
                }
            },3000);
            $("#imgShowleft > li").on("mouseover",function(){
                if(timers!=null){
                    clearInterval(timers);
                    timers=null;
                }
                if(!$(this).hasClass("active")){
                    console.log("1");
                    $(this).addClass("active").siblings().removeClass("active")
                }
            });
        }
        $("#imgShowleft > li").on("mouseout",function(){
            imgShowleft()
        })
        imgShowleft();

html：

<div class="box-warp">
        <ul class="main-box" id="imgShowleft">
            <li class="active">
                    <span class="item-title"><img src="images/num01.png" class="numImg" alt="">标准一</span>
                    <div class="show-box"><img src="images/donghu01.png" alt=""></div>
            </li>
            <li>
                    <span class="item-title"><img src="images/num02.png" class="numImg" alt="">标准二</span>
                    <div class="show-box"><img src="images/donghu02.png" alt=""></div>
            </li>
            <li>
                    <span class="item-title"><img src="images/num03.png" class="numImg" alt="">标准三</span>
                    <div class="show-box"><img src="images/donghu03.png" alt=""></div>
            </li>
        </ul>
    </div>

css :

.box-warp{width: 1152px; margin:0 auto;}
.numImg{margin-bottom: 40px;}
.main-box {height:325px; overflow: hidden; border:1px dotted #ddd; width: 1152px; padding:0;}
.main-box li{width: 80px; float:left; overflow: hidden; transition:width linear 500ms;}
.main-box li.active{width: 992px;}
.main-box li.active .item-title{background:rgba(255, 152, 0, 0.10)}
.main-box li.active .show-box{width: 912px;}
.main-box li .item-title{float: left; vertical-align: top; height: 275px; width: 29px; border-right: 1px solid #fff; background-color: #f8f8f8; color: #666; padding: 25px; font-size: 18px; text-align: center;}
.main-box li .show-box{display:inline-block; float:left; width: 0; transition:width linear 500ms;}

js:

        function imgShowleft(){
            var timers=setInterval(function(){
                var t=$(".active");
                if(t.index()===2){
                    t.removeClass("active");
                    $("#imgShowleft > li").eq(0).addClass("active");
                }else{
                    t.removeClass("active");
                    t.next().addClass("active");
                }
            },3000);
            $("#imgShowleft > li").on("mouseover",function(){
                if(timers!=null){
                    clearInterval(timers);
                    timers=null;
                }
                if(!$(this).hasClass("active")){
                    console.log("1");
                    $(this).addClass("active").siblings().removeClass("active")
                }
            });
        }
        $("#imgShowleft > li").on("mouseout",function(){
            imgShowleft()
        })
        imgShowleft();

还记得以前的面试，让我写setInterval计时器，我只记得setTimeout，不记得setInterval，然后，我就凭着想象力，写了一个setTimeIn，，纪念我这个菜鸟的青春。

效果如下