• [CSS3] 边栏导航动画


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                a{
                    color: #000;
                    text-decoration: none;
                }
                body{
                    background: #000;
                    height: 2000;
                }
                em{
                    font-style: normal;
                }
                #wrap{
                    width: 160px;
                    
                    position: fixed;/*固定定位*/
                    right: 0;
                }
                #wrap a{
                    display: block;/*行转块*/
                    line-height: 30px;
                    border-bottom:2px solid #ddd ;/*下边框  粗细 样式 颜色*/
                    background: #fff;
                    position: relative;/*参照物 找父级*/
                    padding-left: 34px;
                    right: -130px;
                }
                #wrap a em{
                    display: block;
                    width: 30px;
                    height: 30px;
                    background: #0066cc;
                    color: #fff;
                    font-weight: bold;
                    text-align: center;
                    position: absolute;/*绝对定位  改变盒子的位置*/
                    left: 0;
                }
                #wrap a:hover{
                    color: #50C3EB;
                }
                #wrap a:hover em{
                    background: #459DF5;    
                }
            </style>
        </head>
        <body>
            <div id="wrap">
                <a href="#"><em>0</em>HTML</a>
                <a href="#"><em>1</em>JAVASCRIP</a>
                <a href="#"><em>2</em>JAVA</a>
                <a href="#"><em>3</em>ACTIONSCRIPT</a>
                <a href="#"><em>4</em>Perl</a>
                <a href="#"><em>5</em>PHP</a>
                <a href="#"><em>6</em>NODE.JS</a>
                <a href="#"><em>7</em>GO</a>
                <a href="#"><em>8</em>C#</a>
                <a href="#"><em>9</em>C++</a>
                <a href="#"><em>10</em>PHP</a>
                <a href="#"><em>11</em>ACTION</a>
                <a href="#"><em>12</em>SCRIPT</a>
            </div>
        </body>
    </html>
    <script type="text/javascript" src="jQuery/jquery-3.1.1.min.js">
        
    </script>
    <script type="text/javascript">
        /**
         * 
         */
        var timer = null;
        $('#wrap').hover(function(){
            //鼠标滑入
            var This = $(this);//
            timer = setTimeout(function(){
                This.find('a').each(function(i){ 
                    var $This = $(this);//当前a
                    setTimeout(function(){
                        $This.animate({right:'0px'},300);
                    },i*50);
                });
            },300);//定时器
        },function(){
            //鼠标滑出
            if(timer){
                clearTimeout(timer);
            }
            This = $(this);//
            $(this).find('a').each(function(i){
                var $This = $(this);//当前a
                setTimeout(function(){
                    console.log();
                    $This.animate({right:'-130px'},300);
                },i*50);
            });
        });//鼠标划过
    </script>
    <!--
        
        
        a标签 行内元素  不能设置宽高  display: block; 行转块元素 会换行
        浮动 定位会使元素脱离文档流
    -->
  • 相关阅读:
    <转载>c#多线程:线程池和异步编程
    <转载>讲故事谈.NET委托:一个C#睡前故事
    IIS 7.0 成员管理配置
    呵呵,新开博!
    PHP函数中文文档
    请不要做浮躁的人对程序员的忠告
    php新闻发布完成
    JS调试工具
    PHP配置FCKEditor
    ACEGI配置总结(1)
  • 原文地址:https://www.cnblogs.com/frost-yen/p/6909995.html
Copyright © 2020-2023  润新知