手风琴效果隐藏式课程首页 很赞

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手风琴效果隐藏式课程首页 很赞相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>手风琴效果</title>
  <style type="text/css">
    *{margin:0;padding:0;}
    body{background:#000;color:#fff;}/*color:#fff;字体颜色白色*/
    #wrap{width:1182px;height:280px;background:#f00;margin:80px auto;border:6px solid #fff;overflow:hidden;}
    #wrap ul{width:3182px;}
    #wrap ul li{width:196px;height:280px;list-style:none;float:left;border-left:1px solid #fff;box-shadow:0px 0px 20px 5px rgba(0,0,0,0.4);transition:all 0.5s;position:relative;} 
    
    #wrap ul li:nth-child(2){background:#90f;}
    #wrap ul li:nth-child(3){background:#6cf;}
    #wrap ul li:nth-child(4){background:#6c3;}
    #wrap ul li:nth-child(5){background:#f90;}
    #wrap ul li:nth-child(6){background:#cff;}
    #wrap ul:hover li{width:40px;}
    #wrap ul li:hover{width:980px;}
    .course{top:45px;left:20px;width:980px;position:absolute;}
    .course dl{float:left;width:210px;height:190px;border:1px solid #fff;margin:0 10px;box-shadow:0 0 20px #ccc;text-align:center;}
    .course dl dt{padding:5px;height:150px;}
    .course dl dd{font-weight:bold;background:rgba(0,0,0,0.5);line-height:30px;}
    #wrap ul li p{width:196px;height:280px;font-weight:bold;line-height:280px;position:absolute;text-align:center;transition:all 0.5s;background:rgba(0,0,0,0.5);}
    #wrap .title1{top:0px;left:0px;}
    #wrap .title2{bottom:0px;left:0px;}
    #wrap ul li:hover p{width:980px;height:40px;line-height:40px;}
  </style>
 </head>
 <body>
     <div id="wrap" >
        <ul id="ullist">
            <li>
                <div class="course">
                    <dl>
                        <dt><img src="img/c1.jpg"/></dt>
                        <dd>网页制作</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/c2.jpg"/></dt>
                        <dd>JAVA开发</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/c3.jpg"/></dt>
                        <dd>ios安卓</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/c4.jpg"/></dt>
                        <dd>C++开发</dd>
                    </dl>
                </div>
                <p class="title1">IT培训</p>
                <p class="title2">IT培训</p>
            </li>
            <li>
                <div class="course">
                    <dl>
                        <dt><img src="img/z1.jpg"/></dt>
                        <dd>Seo排名</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/z2.jpg"/></dt>
                        <dd>微信营销</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/z3.png"/></dt>
                        <dd>平面设计</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/z4.jpg"/></dt>
                        <dd>淘宝美工</dd>
                    </dl>
                </div>
                <p class="title1">技能培训</p>
                <p class="title2">技能培训</p>
            </li>
            <li>
                <div class="course">
                    <dl>
                        <dt><img src="img/x1.png"/></dt>
                        <dd>畜牧业</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/x2.png"/></dt>
                        <dd>亲子教育</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/x3.png"/></dt>
                        <dd>种植业</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/x4.jpg"/></dt>
                        <dd>弹吉他</dd>
                    </dl>
                </div>
                <p class="title1">兴趣培训</p>
                <p class="title2">兴趣培训</p>
            </li>
            <li>
                <div class="course">
                    <dl>
                        <dt><img src="img/y1.jpg"/></dt>
                        <dd>韩语</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/y2.jpg"/></dt>
                        <dd>日语</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/y3.jpg"/></dt>
                        <dd>泰语</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/y4.jpg"/></dt>
                        <dd>粤语</dd>
                    </dl>
                </div>
                <p class="title1">语言培训</p>
                <p class="title2">语言培训</p>
            </li>
            <li>
                <div class="course">
                    <dl>
                        <dt><img src="img/q1.jpg"/></dt>
                        <dd>天才宝宝</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/q2.jpg"/></dt>
                        <dd>天才宝宝</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/q3.jpg"/></dt>
                        <dd>天才宝宝</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/q4.jpg"/></dt>
                        <dd>C++天才宝宝</dd>
                    </dl>
                </div>
                <p class="title1">天才宝宝</p>
                <p class="title2">天才宝宝</p>
            </li>
            <li>
                <div class="course">
                    <dl>
                        <dt><img src="img/b1.jpg"/></dt>
                        <dd>初中英语</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/b2.jpg"/></dt>
                        <dd>初中语文</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/b3.jpg"/></dt>
                        <dd>英语补课</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/b4.jpg"/></dt>
                        <dd>英语口语</dd>
                    </dl>
                </div>
                <p class="title1">小班提升</p>
                <p class="title2">小班提升</p>
            </li>
        </ul>
        
    </div>
    <audio src="music/1.mp3" id="audio" ></audio>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" >
        $(function(){
            var audioDom = document.getElementById("audio");//不能用$(#"audio")取得对象，该对象在jquery中没有play()方法
            $("#ullist").find("li").hover(function(){
                var index = $(this).index() + 1;//jquery index()方法返回指定元素相对于其他指定元素的 index 位置。
                audioDom.src="music/"+index+".mp3";
                audioDom.play();
            });
        });
    </script>

 </body>
</html>

 

 

 

 代码来源于潭州教育免费视频教程

 

 

 

技术分享

 

以上是关于手风琴效果隐藏式课程首页 很赞的主要内容，如果未能解决你的问题，请参考以下文章

JS实现手风琴效果

在选项卡更改时隐藏手风琴

iOS-实现映客首页TabBar和滑动隐藏NavBar和TabBar

显示/隐藏以作为手风琴工作

响应式手风琴效果导航

手风琴切换效果