网页中固定侧边栏

网页中固定侧边栏demo

1.介绍

  这是一个固定侧边栏练习，效果即在网页中有一个使用了固定定位的侧边栏，当点击四个图片时会弹出响应的边栏，使用了HTML、CSS和JavaScript。

2.HTML核心代码

<div class="container">
	<ul>
		<li class="fir"><img src="./images/01one.png"></li>
		<li class="sec">
			<p>这是第一</p>
		</li>
	</ul>
	<ul>
		<li class="fir"><img src="./images/02two.png"></li>
		<li class="sec">
			<p>这是第二</p>
		</li>
	</ul>
	<ul>
		<li class="fir"><img src="./images/03three.png"></li>
		<li class="sec">
			<p>这是第三</p>
		</li>
	</ul>
	<ul>
		<li class="fir"><img src="./images/04four.png"></li>
		<li class="sec">
			<p>这是第四</p>
		</li>
	</ul>
</div>

3.CSS代码

*{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    /*清除外边距和内边距以及无序列表的列表样式，设置字体大小*/
}
body{
    height: 2000px;
    background-color: pink;
    /*给body设置背景颜色，为了显示固定定位，所以给body设置一个大的高度，使body有滚动条*/
}
.container{
	/*
	开启最外层容器的固定定位
	当元素的position属性设置为fixed时，则开启了元素的固定定位
    固定定位也是一种绝对定位，其大部分的特点都和绝对定位一样
    不同的是：
    	1、固定定位永远都相对于浏览器窗口进行定位
    	2、固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动
    注意：IE6不支持固定定位
	*/
    position: fixed;
    top: 120px;
    left: 20px;
}
.fir{
	/*
	这里给包含图片的li标签设置绝对定位
	绝对定位是相对于离其最近的开启了定位的祖先元素进行定位的
	这里离li标签最近的祖先元素.container开启了固定定位，所以li标签相对于
	<div class="container">进行定位
	开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
	当第一个li标签开启了绝对定位时，第一个li标签脱离了文档流
	下面的li标签往上移动
	*/
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: red;
    z-index: 999;
    /*
    这里给li标签设置一个元素的层级
    使第一个li标签的层级高于第二个li标签
	*/
}
.sec{
    width: 80px;
    height: 80px;
    background-color: wheat;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
    /*
    由于第一个li标签开启了绝对定位，第二个li向上移动
    这里开启了第二个li标签的相对定位
    相对定位不会使元素脱离文档流
    相对定位是相对于元素在文档流中原来的位置进行定位
	*/
}
img{
    width: 80px;
}
p{
    line-height: 40px;
    float: right;
    position: absolute;
    right: 10px;
    top: 20px;
    /*设置p标签在第二个li标签中的位置*/
}

4.JavaScript代码

  JavaScript代码方面，在HTML的head标签中，引入了一个外部的JS文件，其中封装了两个函数，另外在body标签下方又添加了一个script标签来编码JS代码。

4.1body标签下的JS代码：

<script>
    var imgList = document.getElementsByTagName("img");
    var contentList = document.getElementsByClassName("sec");
    for(var i=0; i<imgList.length; i++){
        imgList[i].num = i;
        imgList[i].onclick = function(){
            i = this.num;
            move(contentList[i], "width", 600, 20, function(){});
        };
        imgList[i].onmouseleave = function(){
            i = this.num;
            move(contentList[i], "width", 80, 20, function(){});
            contentList[i].onmouseover = function(){
                move(contentList[i], "width", 600, 20, function(){});
            };
            contentList[i].onmouseleave = function(){
                move(contentList[i], "width", 80, 20, function(){});
            };
        };
    };
</script>

4.2外部的JS文件：

// 获取元素的样式
function getStyle(obj, name){
    // 使用判断解决兼容性问题
    if(window.getComputedStyle){
        return getComputedStyle(obj, null)[name];
    }else{
        return obj.currentStyle[name];
    } 
}
// getComputedStyle(obj, null)[name]和obj.currentStyle[name]
// 表示的是对象的某一个具体的样式


// 设置动画
// var timer;
// 目前我们的定时器标识由全局变量timer保存
// 所有正在执行的定时器都在timer中保存
// 创建一个可以执行简单动画的函数
    // 参数：
        // obj 要执行动画的对象
        // attr 要执行动画的样式
        // speed 移动的速度
        // target 执行动画的目标位置
        // callBack 回调函数，该函数会在动画执行完毕之后执行
function move(obj, attr, target, speed, callBack){
    clearInterval(obj.timer);

    // 判断速度的正负值
        // 如果从0向800移动，则speed为正
        // 如果从800向0移动，则speed为负
    var current = parseInt(getStyle(obj, attr));
    // current代表的是元素当前位置的left值
    // target代表的是元素目标位置的left值
    if(current > target){
        // 此时速度应该为负值
        speed = -speed;
    }
    
    // 向执行动画的对象中添加一个timer属性，用来保存其自身的定时器标识
    obj.timer = setInterval(function(){
        // box1.style.left = box1.offsetLeft + 10 + "px";
        // 这里可以使用上面的方式，但是为了以后方便为其他div添加动画，可以使用getStyle()函数

        var oldValue = parseInt(getStyle(obj, attr));
        var newValue = oldValue + speed;

        // 向左移动时，需要判断newValue是否小于target
        // 向右移动时，需要判断newValue是否大于target

        // 该判断的作用在于使方块刚好到达指定的target位置
        if((speed<0 && newValue<target) || (speed>0 && newValue>target)){
            newValue = target;
        }

        obj.style[attr] = newValue + "px";

        if(newValue == target){
            clearInterval(obj.timer);

            // 动画执行完毕，执行回调函数
            // 通过 && 操作判断回调函数是否存在，如果有，则执行，如果没有，则返回false
            callBack() && callBack();
        }
    }, 30);
}

  外部文件中的JS代码注释比较多，比较详细，我就不多说啦，但是body标签下的JS代码中，有一个问题，即如何利用for循环为所有的图片设置单击响应事件。

  下面的方式问题在于，在单击响应事件触发之前，for循环已经执行完毕了，是先执行for循环，再执行单击响应事件。

<script>
    var imgList = document.getElementsByTagName("img");
    // 这里获取到所有的img
    for(var i=0; i<imgList.length; i++){
        imgList[i].onclick = function(){
            move(contentList[i], "width", 600, 20, function(){});
        };
    };
</script>

  可以使用下面的方式

<script>
    var imgList = document.getElementsByTagName("img");
    // 这里获取到所有的img
    for(var i=0; i<imgList.length; i++){
    	// 这里为每一个img添加一个num属性，用来保存其索引
    	imgList[i].num = i;
        imgList[i].onclick = function(){
        	i = this.num;
        	// 在这里，使用i = this.num; 获取到点击的图片的索引
        	// this就是被点击的那个图片
        	// 以方法的形式调用时，this就是调用方法的那个对象
            move(contentList[i], "width", 600, 20, function(){});
        };
    };
</script>

  这样就可以为每一个img绑定点击响应事件了

5.最后

这是实现侧边栏的一种简陋的方法，有不足或者错误的地方欢迎大家讨论，完整的文件和图片放在了我的GitHub上。
地址：https://github.com/Jin0811/sidebar.git
喜欢的可以去看看，给个小星星~