欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

js弹性运动滑动的菜单

发布时间：2025/3/21 编程问答 40 豆豆
生活随笔 收集整理的这篇文章主要介绍了 js弹性运动滑动的菜单 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>弹性运动效果下滑的菜单</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)
    }
   }
  }
//封装好的函数：
  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>
</head>
<body>
 <ul id="oul">
  <li>首页</li>
  <li>关于我们</li>
  <li>产品</li>
  <li>联系方式</li>
  <li id="underline"></li>
 </ul>
</body>
</html>

转载于:https://www.cnblogs.com/zy88zj91/p/7083035.html

总结

以上是生活随笔为你收集整理的js弹性运动滑动的菜单的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。