JS-制作可伸缩的水平菜单栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="郭菊锋,702004176@qq.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可伸缩的导航菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 14px;
}
a {
color: #333;
text-decoration: none
}
ul {
list-style: none;
height: 30px;
border-bottom: 5px solid #F60;
margin-top: 20px;
padding-left: 50px;
}
ul li {
float: left
}
ul li a {
display: block;
height: 30px;
text-align: center;
line-height: 30px;
width: 120px;
background: #efefef;
margin-left: 1px;
}
a.on,
a:hover {
background: #F60;
color: #fff;
}
</style>
<script>
window.onload = function() {
var aA = document.getElementsByTagName('a');
for(var i = 0; i < aA.length; i++) {
aA[i].onmouseover = function() {
var This = this;
clearInterval(This.time);//一开始要清楚定时器！！删了一下试试还是可以的呀。
This.time = setInterval(function() {
This.style.width = This.offsetWidth + 8 + "px";
if(This.offsetWidth >= 160)//这里，只有一行代码，所以不加花括号也是可以的。
clearInterval(This.time);
}, 30)
}
aA[i].onmouseout = function() {//和over时的效果一样，就是缩回来罢了
clearInterval(this.time);
var This = this;
this.time = setInterval(function() {
This.style.width = This.offsetWidth - 8 + "px";
if(This.offsetWidth <= 120) {//offsetWidth还有这个妙用，这的是元素的实际宽度吗？
This.style.width = '120px';
clearInterval(This.time);
}
}, 30)
}
}
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!--调用jq-->
<!--<script>
// jq的制作方法
$(function() { //('a').hover(
//$('x')选择器，选择标签是x的，括号里的引号里添加的是标签名
//hover方法，表示鼠标经过的时候的效果
//下设两个函数，一个鼠标移入动作，一个鼠标移出动作。
function() {
$(this).stop().animate({
"width": "160px"
}, 200); //jq自带的animate动画效果
},
function() {
$(this).stop().animate({
"width": "120px"
}, 200);
}
)
})
</script>-->
</head>
<body>
<ul>
<li>
<a class="on" href="#">首 页</a>
</li>
<li>
<a href="#">新闻快讯</a>
</li>
<li>
<a href="#">产品展示</a>
</li>
<li>
<a href="#">售后服务</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
<p>来自慕课网教程
<a>http://www.imooc.com/video/93</a>
</p>
</body>
1 <script> 2 window.onload = function() { 3 var aA = document.getElementsByTagName('a'); 4 for(var i = 0; i < aA.length; i++) { 5 aA[i].onmouseover = function() { 6 var This = this; 7 clearInterval(This.time); 8 This.time = setInterval(function() { 9 This.style.width = This.offsetWidth + 8 + "px"; 10 if(This.offsetWidth >= 160) 11 clearInterval(This.time); 12 }, 30) 13 } 14 aA[i].onmouseout = function() { 15 clearInterval(this.time); 16 var This = this; 17 this.time = setInterval(function() { 18 This.style.width = This.offsetWidth - 8 + "px"; 19 if(This.offsetWidth <= 120) { 20 This.style.width = '120px'; 21 clearInterval(This.time); 22 } 23 }, 30) 24 } 25 } 26 } 27 </script>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？