首页 > 代码库 > [CSS3] 边栏导航动画

[CSS3] 边栏导航动画

2024-09-26 03:32:02   221人阅读

<!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; 行转块元素 会换行
    浮动 定位会使元素脱离文档流
-->

 

[CSS3] 边栏导航动画


联系
我们