<!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> .bar { width: 40px; height: 40px; position: fixed; top: 10px; right: 0; text-align: center; line-height: 40px; cursor: pointer; color: #fff; } .con { position: absolute; top: 0; left: 0; background: darkcyan; width: 200px; height: 40px; z-index: -1; } </style> <script src="animate.js"></script> </head> <body> <div class="bar"> <span>←</span> <div class="con">意见反馈</div> </div> <script> var bar = document.querySelector('.bar'); var con = document.querySelector('.con'); var span = document.querySelector('span'); bar.addEventListener('mouseenter', function() { animate(con, -160); }); bar.addEventListener('mouseleave', function() { animate(con, 0); }); function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function() { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (con.offsetLeft == target) { clearInterval(obj.timer); span.innerHTML = '←'; } obj.style.left = obj.offsetLeft + step + 'px'; }, 30); } </script> </body> </html>