HTML页面侧栏动态效果

最新推荐文章于 2024-07-31 17:45:09 发布

霜月枫桥

最新推荐文章于 2024-07-31 17:45:09 发布

阅读量4.6k

点赞数

分类专栏： Web前台demo小记

本文链接：https://blog.csdn.net/MOONCOM/article/details/78518334

版权

Web前台demo小记专栏收录该内容

22 篇文章 3 订阅

订阅专栏

代码如下所示：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>页面侧栏动态效果</title>
    <style>
    *{
        padding:0px;
        margin:0px;
    }
    body{
        background-color:skyblue;
        height:1200px;
    }
    #sidebar{
        position:fixed;
        width:130px;
        right:0px;
        top:50%;
        transform:translateY(-50%);
        
    }
    #sidebar ul{
        list-style:none;
        
        overflow:hidden;
    }
    #sidebar li{
        line-height:30px;
        border-bottom:2px solid gray;
        position:relative;
        background-color:white;
        left:100px;
    }
    #sidebar li a{
        text-decoration:none;
        display:block;
    }
    #sidebar li a span{
        display:inline-block;
        height:30px;
        width:30px;
        background-color:blue;
        color:white;
        font-weight:bold;
        text-align:center;
    }
    #sidebar li:hover a span{
        background-color:white;
        color:blue;
    }
    #sidebar li:hover a {
        background-color:blue;
        color:white;
    }
    </style>
</head>
<body>
    <div id="sidebar">
        <ul>
            <li><a href="#"><span>1</span>第一页</a></li>
            <li><a href="#"><span>2</span>第二页</a></li>
            <li><a href="#"><span>3</span>第三页</a></li>
            <li><a href="#"><span>4</span>第四页</a></li>
            <li><a href="#"><span>5</span>第五页</a></li>
            <li><a href="#"><span>6</span>第六页</a></li>
            <li><a href="#"><span>7</span>第七页</a></li>
            <li><a href="#"><span>8</span>第八页</a></li>
            <li><a href="#"><span>9</span>第九页</a></li>
            <li><a href="#"><span>10</span>第十页</a></li>
            <li><a href="#"><span>11</span>第十一页</a></li>
            <li><a href="#"><span>12</span>第十二页</a></li>
            <li><a href="#"><span>13</span>第十三页</a></li>
        </ul>
    </div>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
    $(function(){
        $("#sidebar").hover(function(){
            $("#sidebar li").each(function(index){
                setTimeout(function(){
                    $(this).stop().animate({"left":"0px"});
                }.bind(this),index*50);
            });
        },function(){
            $("#sidebar li").each(function(index){
                setTimeout(function(){
                    $(this).stop().animate({"left":"100px"});
                }.bind(this),index*50);
            });
        });
    });
    </script>
</body>
</html>

效果图如下：

相关知识点：

1、PC端默认不使用HTML5标签，例如<aside>标签，因为IE不支持
在<style>中编辑CSS，是一种DHTML风格，DHTML风格为HTML+JS+CSS都写在一个页面中，节约服务器的资源。在页面中代码少的情况下，建议使用该方法。但是在代码多时，建议使用<link>外联

2、使用通配符去除元素的默认内外边距
*{
padding:0px;
margin:0px;
}
即使元素的内外边距使我们需要的，也要去除，因为不同浏览器的兼容性（padding，margin）不同。
但是尽量不要使用*，因为很吃资源，可以设置具体的元素属性。

3、将元素移动到屏幕的左边，方法有浮动、定位、margin
使用margin的方法，如下设置
margin:auto;
margin-right:0px;

4、WEB语义化 ----重点----

5、行内块级元素有input、img、table

6、javascript是一门动态类型、弱类型、基于原型的面向对象编程语言
动态类型：
java中设置int i=0; //确定类型
js中设置var i; //可以为Number、NULL、String等类型

js中，最简单的是特效->数据交互和数据分离->数据结构->设计模式

推荐书籍：you don't know js