本文介绍了一种使用纯JS和JQuery实现网页导航栏鼠标悬停时宽度平滑变化的方法。通过设置定时器逐步改变链接元素的宽度，并在鼠标移开时恢复原状，实现了美观且交互友好的导航菜单。该效果适用于多种浏览器环境。
//JS实现：
<script>
window.onload = function () {
var aA = document.getElementsByTagName('a');
for (var i = 0; i < aA.length; i++) {
aA[i].onmouseover = function () {
clearInterval(this.time)
var This = this;
This.time = setInterval(function () {
This.style.width = This.offsetWidth + 8 + "px";
if (This.offsetWidth >= 180) {
clearInterval(This.time)
}
}, 30)
}
aA[i].onmouseout = function () {
clearInterval(this.time)
var This = this;
This.time = setInterval(function () {
This.style.width = This.offsetWidth - 8 + "px";
if (This.offsetWidth <= 100) {
clearInterval(This.time)
}
}, 30)
}
}
}
</script>
//JQ实现
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script>
$(function () {
$('a').hover(
function () {
$(this).animate({ "width": "160px" }, 200);
},
function () {
$(this).animate({ "width": "120px" }, 200);
}
)
})
</script>
CSS样式
<style>
* {
margin: 0;
font-size: 14px;
}
ul {
list-style: none;
height: 50px;
border-bottom: 5px solid #000;
}
li {
float: left;
margin-top: 20px;
}
a {
text-decoration: none;
display: block;
height: 30px;
line-height: 30px;
width: 100px;
background-color: #CCC;
margin-bottom: 1px;
color: #000;
text-align: center;
}
a:hover {
background-color: #F30;
color: #FFF;
}
</style>
<body>
<form id="form1" runat="server">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</form>
</body>
扫一扫
3260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
