当前位置:主页 > IT技术分享 >

jQuery 手风琴效果程序代码

作者:AG集&#发表时间:2018-12-20

手风琴效果我们以前用js写时要花很长的时间,下面我来给大家介绍一下关于ag8亚游集团jQuery 手风琴效果程序代码,各位朋友不防进入参考。

相信很多人已经见过jQuery 手风琴的效果,jQuery 手风琴效果在展示网页内容时更好的利用了网页空间,显得别具一格。今天就让我们来看看怎么一步一步实现jQuery 手风琴效果,最终的效果如下图:

首先,我们看看html标记,如下:

 代码如下 复制代码

<div id="accordion">
    <h2><a href="#"></a></h2>
    <div class="item">
        <a target="_blank" href="#"><img src="" alt="" /></a>
     <p></p>
    </div>
    <!--more item-->
</div>

可见,使用的html还是挺明了的。CSS样式在这里就不给出了,大家可以在Demo页中查看源文件找到。下边我们重点看看jQuery 手风琴代码实现部分。直接给出jQuery代码如下:

 代码如下 复制代码

$(document).ready(function () {
    //先隐藏所有Item
    $(".item").hide();
    //显示第一个Item
    $(".item:first").show();
    $("#accordion h2").click(function () {
        //如果当前Item是隐藏
        if ($(this).next().is(":hidden")) {
            //先slideUp所有Item
            $(".item").slideUp();
            //slideDown当前Item
            $(this).next().slideDown();                  
        }
    });
})

核心代码讲完了,我们可看完整实例

 代码如下 复制代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>jQuery 手风琴效果-jQuery在线演示-jQuery学习</title>
    <link href="/Stylesheet_min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #accordion{margin:0 auto;width:400px;}
        #accordion h2{
            background:#0066FF 0 0;
            float:left;
            font-size:18px;
            font-weight:normal;
            height:30px;
            line-height:30px;
            margin:0 0 3px;
            width:400px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }
        #accordion h2 a{
            color:White;
            display:block;
            font-size: 16px;
            text-decoration:none;
            padding-left:10px;
            outline:none;
        }
        #accordion h2 a:hover{           
            color:Yellow;
            cursor:pointer;
        }
        .current{
            color:Yellow;
        }
        .item{
            clear:both;
         margin: 0 0 3px;
         overflow: hidden;
         font-size: 14px;
         width: 398px;
         background: #f0f0f0;
         border: 1px solid #CCC;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }
        .item img{
            border:none;
            float:left;
            margin:10px 5px 5px;
        }
        .item p{
            margin-top:5px;
            padding:0 10px 0 135px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  
    <script type="text/javascript">
        $(document).ready(function () {
            //先隐藏所有Item
            $(".item").hide();
            //显示第一个Item
            $(".item:first").show();
            $("#accordion h2").click(function () {
                //如果当前Item是隐藏
                if ($(this).next().is(":hidden")) {
                    //先slideUp所有Item
                    $(".item").slideUp();
                    //slideDown当前Item
                    $(this).next().slideDown();
                }
                return false;
            });
        })
    </script>
</head>
<body>
    <div id="page-wrap">
      
        <div id="content-wrap">    
            <div id="content-left" class="demo">
               
              
                <div id="accordion">
                    <h2><a href="#">jQuery Opacity图片聚焦效果</a></h2>
                    <div class="item">
                        <a target="_blank" href="/jquery-use-opacity-show-focus.html"><img src="/images/demo/jquery-opacity.jpg" alt="jQuery Opacity图片聚焦效果" /></a>
                     <p>前些天在一个网站上看到使用Opacity实现的效果,当用户光标停留在某个图片上时,其余图片改为半透明状态,使得我们目光停留在当</p>
                    </div>
                    <h2><a href="#">jQuery插件-显示图片缩略图</a></h2>
                    <div class="item">
                        <a target="_blank" href="/use-jquery-plugin-to-show-thumbnail-gallery.html"><img src="/images/demo/thumbnai.jpg" alt="jQuery插件-显示图片缩略图" /></a>
                     <p>今天,我们看看使用一个jQuery插件,实现图片缩略图的显示,并查看大图片。这样,当显示的图片非常大时,很有必要显示一张小图</p>
                    </div>

                    <h2><a href="#">jQuery移动listbox的值</a></h2>
                    <div class="item">
                        <a target="_blank" href="/use-jquery-to-move-value-in-listbox.html"><img src="/images/demo/20100902.jpg" alt="jQuery移动listbox的值" /></a>
                     <p>jQuery操作listbox原理并不难,就是将listbox中的选中项进行移动,实现我们需要的移动效果。</p>
                    </div>
                </div>
            </div>
           
</body>
</html>

http://www.bkjia.com/jQuery/449115.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/449115.htmlTechArticle手风琴效果我们以前用js写时要花很长的时间,下面我来给大家介绍一下关于jQuery 手风琴效果程序代码,各位朋友不防进入参考。 相信很多...

本文源自: 环亚娱乐

IT技术分享
联系我们