本文介绍了一种使用CSS实现的动态背景效果，当鼠标悬停在导航元素上时，背景会平滑地移动到对应位置。通过JavaScript获取所有导航元素，并监听鼠标悬停事件，计算目标位置并启动动画，实现了流畅的视觉体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
ul{
width:750px;
height:80px;
border:1px solid black;
margin:100px auto 0;
position: relative;
}
.nav{
float:left;
width:148px;
border:1px solid black;
height:78px;
line-height: 78px;
text-align: center;
}
.bg{
width:150px;
height:80px;
background:#f40;
position:absolute;
left:0;
top:0;
opacity: 0.5;
}
</style>
</head>
<body>
<ul>
<li class="nav">gao</li>
<li class="nav">abanna</li>
<li class="nav">rong</li>
<li class="nav">shi</li>
<li class="nav">sha</li>
<li class="bg"></li>
</ul>
<script>
var navArray=Array.prototype.slice.call(document.getElementsByClassName('nav'),0);
var bg=document.getElementsByClassName('bg')[0];
navArray.forEach(function(elem,index){
elem.onmouseover=function(){
var newLeft=this.offsetLeft;
startMove(bg,newLeft);
// console.log(newLeft);
}
})
function startMove(obj,target){
clearInterval(obj.timer);
var speed,u,a;
obj.timer=setInterval(function(){
speed=40;
a=(target-obj.offsetLeft)/2;
speed=speed+a;
u=0.9;
speed=speed*u;
console.log(speed);
if(Math.abs(speed)<1){
clearInterval(obj.timer);
obj.style.left=target+"px";
// console.log(obj.style.left);
}
else{
obj.style.left=obj.offsetLeft+speed+'px';
// console.log(obj.style.left);
}
},30);
}
</script>
</body>
</html>
扫一扫
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
