Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Sliding Motion Effects menu </title>
<script>
Window.onload = function () {
var Oul = document.getElementById (' Oul ');
var oLi = oul.getelementsbytagname (' li ');
var oline = document.getElementById (' #underline ');
var oline= oli[oli.length-1]
for (var i = 0; i < oli.length-1; i++) {
Oli[i].onmouseover = function () {
Move (Oline,this.offsetleft);
Console.log (This.offsetleft)
}
}
}
Encapsulated functions:
var speed = 0;
var left = 0;
function Move (obj,target) {
Clearinterval (Obj.timer);
Obj.timer = setinterval (function () {
Speed + = (target-obj.offsetleft)/5;
Speed *= 0.7;
Left + = speed;
Obj.style.left = left + "px";
if (Math.Abs (speed) <1&&math.abs (target-left) <1) {
Obj.style.left = target + "px";
Clearinterval (Obj.timer);
}
Document.title = obj.style.left + ' | ' + target;
}, 30)
}
</script>
<style>
*{
margin:0;
padding:0;
}
li{
List-style:none;
Float:left;
width:100px;
height:30px;
border:1px solid #ccc;
position:relative;
Text-align:center;
line-height:30px;
Z-index:2;
Cursor:pointer;
}
#underline {
width:101px;
height:5px;
background-color:red;
Position:absolute;
Overflow:hidden;
Border:none;
top:26px;
left:0;
Z-index:1;
}
ul{
width:508px;
height:30px;
position:relative;
margin:100px Auto 0;
}
</style>
<body>
<ul id= "Oul" >
<li> Home </li>
<li> About Us </li>
<li> Products </li>
<li> Contact Information </li>
<li id= "Underline" ></li>
</ul>
</body>
JS Elastic Motion Sliding Menu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
