zoukankan      html  css  js  c++  java
  • 一款基于jquery的手风琴显示详情

    今天要各网友分享一款基于jquery的手风琴显示详情实例。当单击顶部箭头的时候,该项以手风琴的形式展示显示详情。效果图如下:

    在线预览   源码下载

    实现的代码。

    html代码:

     <div align="center">
            <span class="openzone" zone="lestrois" id="autoclicklestrois">NOW, OPEN THE THREE !</span>
            <div style=" 800px">
                <table border="0" cellpadding="10" cellspacing="5" width="100%">
                    <tr>
                        <td id="col1" valign="top" align="center" class="allcol">
                            <img src="arrow.png" class="openzone" zone="1" id="opener1" />
                            <div class="alltitle" id="title1">
                                MY FIRST</div>
                            <br>
                            <div id="contentzone1" class="allcontent">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                                reprehenderit.</div>
                        </td>
                        <td id="col2" valign="top" align="center" class="allcol">
                            <img src="arrow.png" class="openzone" zone="2" id="opener2" />
                            <div class="alltitle" id="title2">
                                MY SECOND</div>
                            <br>
                            <div id="contentzone2" class="allcontent">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                                reprehenderit.</div>
                        </td>
                        <td id="col3" valign="top" align="center" class="allcol">
                            <img src="arrow.png" class="openzone" zone="3" id="opener3" />
                            <div class="alltitle" id="title3">
                                MY THIRD</div>
                            <br>
                            <div id="contentzone3" class="allcontent">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                                reprehenderit.</div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

    css代码:

     #col1
            {
                background-image: url(img1.jpg);
                background-color: #e7e7e7;
                background-repeat: no-repeat;
                height: 470px;
            }
            #col2
            {
                background-image: url(img2.jpg);
                background-color: #e7e7e7;
                background-repeat: no-repeat;
                height: 470px;
            }
            #col3
            {
                background-image: url(img3.jpg);
                background-color: #e7e7e7;
                background-repeat: no-repeat;
                height: 470px;
            }
            .alltitle
            {
                color: #ffffff;
                font-weight: bold;
                font-size: 20px;
            }
            .allcontent
            {
                font-size: 17px;
                padding-left: 100px;
                text-align: left;
            }
            .openzone
            {
                padding: 0px 10px;
                cursor: pointer;
            }

    js代码:

     $(document).ready(function () {
                $('.openzone').click(function () {
    
                    var zone = $(this).attr('zone');
    
                    if (zone == '1') {
                        var autre1 = '2';
                        var autre2 = '3';
                    }
                    else if (zone == '2') {
                        var autre1 = '1';
                        var autre2 = '3';
                    }
                    else if (zone == '3') {
                        var autre1 = '1';
                        var autre2 = '2';
                    }
    
                    if (zone != 'lestrois') {
                        $('#contentzone' + autre1).hide();
                        $('#contentzone' + autre2).hide();
    
                        $('#col' + autre1).animate({  '70px' }, 200);
                        $('#col' + autre2).animate({  '70px' }, 200);
                        $('#col' + zone).animate({  '' }, 200)
                .queue(function () {
                    $('#contentzone' + zone).show();
                    $(this).dequeue();
                });
    
                        $('#opener' + zone).hide();
    
                        $('#opener' + autre1).show();
                        $('#opener' + autre2).show();
    
                        $('#title' + zone).css("font-size", "20px");
                        $('#title' + autre1).css("font-size", "12px");
                        $('#title' + autre2).css("font-size", "12px");
    
                    }
                    else if (zone == 'lestrois') {
                        $('.allcol').animate({  '33%' }, 200)
               .queue(function () {
                   $('.allcontent').show();
                   $(this).dequeue();
               });
    
                        $('.openzone').show();
    
                        $('.alltitle').css("font-size", "20px");
                    }
                    return false;
                });
            });

    注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/10405

  • 相关阅读:
    瓜子IM智能客服系统的数据架构设计(整理自现场演讲)
    正确理解IM长连接的心跳及重连机制,并动手实现(有完整IM源码)
    从游击队到正规军(二):马蜂窝旅游网的IM客户端架构演进和实践总结
    拿起键盘就是干:跟我一起徒手开发一套分布式IM系统
    12306抢票带来的启示:看我如何用Go实现百万QPS的秒杀系统
    适合新手:从零开发一个IM服务端(基于Netty,有完整源码)
    关于按钮多次点击问题
    UIButton内部子控件自定义布局-“UIEdgeInsets”
    iOS中的数据库应用
    swift中的正则表达式
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4088650.html
Copyright © 2011-2022 走看看