<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> *{margin:0;padding:0;} a{text-decoration:none;} #menu{position: fixed;left:-80px; bottom: 100px;} #menu ul{text-align: center;float:left;list-style: none;} #menu ul li{height:20px;80px;font-size:12px;line-height: 20px;background: #999; border-bottom:1px solid #ccc;} #menu ul li a{display: block; 100%;height:100%; color:#fff;} #menu p{float:left;line-height: 20px;position: relative;top:22px;margin-left:4px;background: rgb(223, 168, 67);} </style> <body> <div id="menu"> <ul> <li><a href="">list1</a></li> <li><a href="">list2</a></li> <li><a href="">list3</a></li> <li><a href="">list4</a></li> </ul> <p>菜<br/>单</p> </div> </body> <script> function Move(id,speed){ this.timer = null; //把timer声明成构造函数属性，否则定时器清除的不是一个变量，无法实现定时器清除 this.speed = speed; this.menu = document.getElementById(id); let _this = this; this.menu.onmouseover = function(){ _this.funcStart(this,_this,0); }; this.menu.onmouseout = function(){ _this.funcStart(this,_this,-80); //参数分别表示创建的对象，菜单，边界值 }; } Move.prototype.funcStart = function(oMenu,obj,iTarget){ //用三个形参接收数据 clearInterval(obj.timer); obj.timer = setInterval(function(){ if(iTarget >= 0){ if(oMenu.offsetLeft >= iTarget){ clearInterval(obj.timer); oMenu.style.left = iTarget; }else{ oMenu.style.left = oMenu.offsetLeft + obj.speed + "px"; } }else{ if(oMenu.offsetLeft <= iTarget){ clearInterval(obj.timer); oMenu.style.left = iTarget + "px"; //记得加px }else{ oMenu.style.left = oMenu.offsetLeft - obj.speed + "px"; } } },10); } window.onload = function(){ new Move('menu',5); } </script> </html>