jQuery实现小功能之折叠

最新推荐文章于 2023-04-23 23:47:37 发布

BunnyMelody

最新推荐文章于 2023-04-23 23:47:37 发布

阅读量1.7k

点赞数

分类专栏：【初级】前端文章标签： jquery实现折叠

本文链接：https://blog.csdn.net/viciousDear/article/details/45070909

版权

【初级】前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

功能简介: 类似手风琴的折叠效果
功能缺陷: 目标动态逐渐显示隐藏的段落, 但是现在的显示并不平滑

功能效果:
这里写图片描述

这里写图片描述

这里写图片描述
【折叠.html】

<!DOCTYPE html>
<head>
    <head>
        <meta charset="utf-8"/>
        <title>折叠</title>
        <link rel="stylesheet" href="折叠.css" type="text/css">           
        <script type="text/javascript" src="jquery-2.1.3.js"></script>
        <script type="text/javascript" src="折叠.js"></script>
    </head>

    <body>
        <div class="fourImagesNav">
            <div class="imageAndText">
                <div class="imageItem">
                    <img src="全国首个.png" alt="全国首个">
                </div>

                <div class="textItem">
                    <h4 ><a href="#">&nbsp;全国首个电子招投试点城市荣誉花落深圳</a></h5>
                    <p><a href="#">2014年7月, 全国首个电子招投试点城市荣誉花...</a></p>
                </div>
            </div>

            <div class="imageAndText">
                <div class="imageItem">
                    <img src="全国首个.png"/>
                </div>

                <div class="textItem">
                    <h4>公共资源交易中心作为公共资源</h4>
                    <p>政府主导、管办分离，集中交易、规范运行，部门监管</p>
                </div>
            </div>

            <div class="imageAndText">
                <div class="imageItem">
                    <img src="全国首个.png"/>
                </div>

                <div class="textItem">
                    <h4>多种不同的业务类型决定了</h4>
                    <p>多种不同的业务类型决定了业务流程的多样化。总体</p>
                </div>
            </div>

        </div>
    </body>

</head>

【折叠.css】

body{
    font-size:12px;
}
.fourImagesNav{
    position:absolute;
    top:625px;
    left:125px;
    /*background-color:silver;*/
    width:1150px;
    height:215px;
    margin-bottom:200px;
}

.imageAndText{
    position:relative;
    width:95px;
    height:85px;
    float:left;
    margin-left:2px;
    padding-left:2px;
    margin-top:2px;
    /*background-color:yellow;*/
    overflow:hidden;
}

.imageItem{
    float:left;
    width:95px;
    height:85px;
}

.textItem{
    float:left;
    width:200px;
    height:85px;
    /*background-color:pink;*/
}

.textItem h4 a{
    text-decoration:none;
    color:black;
}

.textItem p a,.firstImageText p a,.secondImageText p a{
    text-decoration:none;
    color:rgb(115,114,112);
}

.thirdImageText p a:hover,.firstImageText p a:hover,.secondImageText p a:hover{
    color:black;
}

【折叠.js】

(function($){
    var pre;
    var cur;

    function itemShow(){
        $(".current").stop();      
        cur.delay(100).animate({//.delay():设置一个延时来推迟执行队列中之后的项目。 'width':'300px' },300); 
        pre.delay(100).animate({ 'width':'95px' },300);
    }

    $(document).ready(function(){
        pre = cur = $($('.imageAndText')[0]);
        cur.addClass('current');
        cur.css({ 'width':'300px' });
        $('.imageAndText').hover( function(){ if($(this)[0] != cur[0]){ pre=cur; pre.removeClass('current'); cur=$(this); cur.addClass("current"); itemShow(); } } ); 
    });

})(jQuery);