伸缩菜单的制作——水平方向

最新推荐文章于 2022-06-09 16:45:15 发布

原创最新推荐文章于 2022-06-09 16:45:15 发布 · 617 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现水平方向伸缩菜单的方法，并详细解释了如何通过鼠标悬停事件动态调整菜单项宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伸缩菜单的制作——水平方向</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
margin: 100px auto;
width: 1000px;
border-bottom: 6px solid #FB4E09;
padding: 0 40px;
}
li{
display: inline-block;
width: 100px;
text-align: center;
background-color: #FB4E09;
padding:15px 0;
}
</style>
</head>
<body>
<ul id="banner">
<li style="width: 100px">首页</li>
<li style="width: 100px">新闻资讯</li>
<li style="width: 100px">产品展示</li>
<li style="width: 100px">售货服务</li>
<li style="width: 100px">联系我们</li>
</ul>
<script type="text/javascript">
window.onload=function(){
var banner=document.getElementById("banner").getElementsByTagName("li");
// alert(banner.length);
for (var i = 0; i < banner.length; i++) {
banner[i].onmouseover=function(){
var This=this;
clearInterval(This.interavl);
This.interavl=setInterval(function(){
This.style.width=This.offsetWidth+10+"px";
if(This.offsetWidth>150){
clearInterval(This.interavl);
}
},30);

}
banner[i].onmouseout=function(){
var This=this;
clearInterval(This.interavl);
This.interavl=setInterval(function(){
This.style.width=This.offsetWidth-8+"px";
if(This.offsetWidth<=100){
clearInterval(This.interavl);
}
},30);

}
}

}
</script>
</body>

</html>

1、this.style.width获取不到值得原因

（1）元素未设置宽度值。

（2）元素设置了宽度值，但是设置在内联或外联样式表中，而非内嵌式的。只有内嵌式的设置宽度才能被获取到。

（3）可以用style.width来设置元素的宽度并且表现出来。

（4）它与this.offsetWidth不同之处

this.style.width返回的是内容区域的宽度，即你单纯设置的宽度，不加padding和border。而且返回的值是带单位的PX。

this.offsetWidth返回的是内容区域+padding+border。返回的值不带单位。

一般想要通过 style.属性获取的属性值的，都需要使用内嵌式的设置才能获得，offset属性则可以获取任意地方定义的属性值

可以利用 style.属性来设置属性的值并使其表现出来

2、关于var This=this的使用

每个函数在定义被ECMAScript解析器解析时，都会创建两个特殊的变量：this和arguments,换句话说，每个函数都有属于自己的this对象，这个this对象是在运行时基于函数的执行环境绑定的，即在全局对象中，this指向的是window对象；在自定义函数中，this对象指向的是调用这个函数的对象，
也就是说，this指向的是调用执行环境的那个对象。如果是在函数嵌套环境中，this指代的是调用外部函数或者内部函数的执行环境的对象；
（注意：可以通过使用call()或者apply()改变函数执行环境的情况下，this就会指向其他对象。）

在这个例子里面this指代的是触发onmouseover的对象，

this是Javascript语言的一个关键字它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

//通常用法：将上下文this缓存到一个变量中
//以便在本函数作用域内包含另一个函数作用域的情况下可以继续使用此上下文对象this
//如果省略var This=this; 这行，那么在嵌套函数作用域内就无法访问到本函数作用域的成员了。

this对象在程序中随时会改变，而var This=this之后，This没改变之前仍然是指向当时的this，这样就不会出现找不到原来的对象。