zoukankan      html  css  js  c++  java
  • jquery实现简单的手风琴效果

    最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习。

    明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始。

    菜鸟起飞的机会都没有,那就尴尬了.

    纯属练习:

    效果如图:

    html:

    <ul class="wrap">
       <li class="checked">
           <span>选项1</span>
           <div>1</div>
       </li>
        <li>
            <span>选项2</span>
            <div>2</div>
        </li>
        <li>
            <span>选项3</span>
            <div>3</div>
        </li>
        <li>
            <span>选项4</span>
            <div>4</div>
        </li>
        <li>
            <span>选项5</span>
            <div>5</div>
        </li>
    </ul>

    css:

        ul,li,div,span{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            span{
                display: block;
                border-bottom:1px solid black;
                background-color: orange;
    
            }
    
            .wrap{
                width: 400px;
                height: 500px;
                border: 1px solid black;
            }
            .wrap li{
                width: 400px;
                height: 40px;
               overflow: hidden;
    
            }
            ul li.checked{
                height: 340px;
            }
            .wrap li span{
                height: 39px;
                line-height: 39px;
               text-indent: 20px;
            }
    
            .wrap li div{
                height: 300px;
                line-height: 300px;
                text-align: center;
                font-size: 50px;
            }

    jquery:

      $(function(){
                $("ul li span").mouseover(function(){
                    $(this).parent().animate({height:340},500);
                    $(this).parent().siblings().animate({height:40},500);
                })
            })
    2018年,12月开始,我要认真写博客啦
  • 相关阅读:
    ThinkPHP中PHPExcel的使用(包含日期格式)
    python学习一
    autocomplete 在火狐中文输入的问题
    NPM WARN 错误分析汇总
    react+reatrouter+redux学习笔记
    a++与++a的区别
    ES6箭头函数(Arrow Functions)
    document.referrer
    modem无法编译
    linux时钟浅析 转载
  • 原文地址:https://www.cnblogs.com/lw1995/p/6666951.html
Copyright © 2011-2022 走看看