js Realizes Navigation Bar Effect with Slow Moving Animation
- 2021-07-10 18:53:51
- OfStack
Without saying much, please look at the example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
ul,li { padding: 0; margin: 0; }
li { list-style: none; }
#box{
height: 48px;
width: 900px;
background-color: #459DF5;
margin: 50px auto;
position: relative;
}
#caution {
width: 150px;
height: 48px;
background-color: #4B92D8;
position: absolute;
top: 0;
left: 0;
}
#list {
position: absolute;
}
#list li {
width: 150px;
height: 48px;
float: left;
color: #fff;
font: 500 20px/48px " Microsoft Yahei ";
text-align: center;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
// Get ul ID
var oUl = document.getElementById("list");
// Get span ID
var caution = document.getElementById("caution");
// Get ul All the children
var aLi = oUl.children;
// Timer management
var timer = null;
// Slow motion
var leader = 0;
var target = 0;
// Stay
var current = 0;
for(var i = 0;i<aLi.length;i++){
// Mouse movement
aLi[i].onmouseover = function(){
// Close the timer
clearInterval(timer);
// Gets the current left Value
target = this.offsetLeft;
// Start the timer
timer = setInterval(autoCaution,20);
}
// Mouse click
aLi[i].onmousedown = function(){
// Know all highlighted text
for(var j = 0;j<aLi.length;j++){
aLi[j].style.color = "#fff";
}
// The current click bar turns red
this.style.color = "#ccc";
// Prompt box
current = this.offsetLeft;
caution.style.left = current+"px";
}
}
// Mouse off
oUl.onmouseout = function(){
// Close the timer
clearInterval(timer);
target = current;
timer = setInterval(autoCaution,20);
}
// Slow motion animation
function autoCaution(){
leader = leader +(target - leader) /10;
caution.style.left = leader+"px";
}
}
</script>
</head>
<body>
<div id="box">
<span id="caution"></span>
<ul id="list">
<li> Home page </li>
<li> Company Profile </li>
<li> Corporate culture </li>
<li> To recruit talent </li>
<li> Enterprise Forum </li>
</ul>
</div>
</body>
</html>