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

  • 相关阅读:
    深挖 GIL锁
    numpy小入门
    IPython和Jupyter notebook
    LINUX+Vmware+SVN的配置和安装
    windows下使用火狐浏览器插件AutoProxy+MyEnTunnel+SSH访问海外站点(转)
    无法打开键: UNKNOWNComponentsBE1FB738077DBE490AF18C3B9B1A1EE8E5F5286B58B542741A00A0A9AA420B27
    如何将软件测试和数据库联系在一起(转)
    接口测试第十二课(fidller过滤)(转)
    android、IOS和手机基础知识
    广州女生手机被偷 里面的身份证出卖了支付宝密码丨丢手机后必做6件事(转)
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4088650.html
Copyright © 2011-2022 走看看