html中绝对定位与侧拉菜单,网页中固定侧边栏

进行定位

开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

当第一个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代码：

var imgList = document.getElementsByTagName("img");

var contentList = document.getElementsByClassName("sec");

for(var i=0; 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(){});

};

};

};

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 && newValue0 && 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循环，再执行单击响应事件。

var imgList = document.getElementsByTagName("img");

// 这里获取到所有的img

for(var i=0; i

imgList[i].onclick = function(){

move(contentList[i], "width", 600, 20, function(){});

};

};

可以使用下面的方式

var imgList = document.getElementsByTagName("img");

// 这里获取到所有的img

for(var i=0; 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(){});

};

};

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

5.最后

这是实现侧边栏的一种简陋的方法，有不足或者错误的地方欢迎大家讨论，完整的文件和图片放在了我的GitHub上。

地址：https://github.com/Jin0811/sidebar.git

喜欢的可以去看看，给个小星星~