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

左手的ㄟ右手 2022-10-06 12:45 157阅读 0赞

进行定位

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

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

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

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 21Flutter Drawer侧边栏、以及侧边栏内容布局

相关侧边导航栏

相关 html命名侧边栏_HTML5教程如何使用aside标记创建侧边栏

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

相关 html侧边导航栏,浮动侧边导航栏的基本布局

相关 jQueryCSS3视角动画侧边栏菜单

相关侧边固定导航菜单监听滚动

相关 21例创新的侧边栏菜单网页设计作品

相关自定义控件：SlidingMenu，侧边栏，侧滑菜单

相关 html+js制作侧边下拉导航栏菜单