【免费】html+css+js实现导航栏色块跟随滑动.rar资源-CSDN文库

共2个文件

html：1个

gif：1个

html

javascript

需积分: 0 85 浏览量 2024-06-25 13:18:09 上传评论收藏 85KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html+css+js实现导航栏色块跟随滑动.zip （2个子文件）

html+css+js实现导航栏色块跟随滑动

html+css+js实现导航栏色块跟随滑动.gif 174KB

html+css+js实现导航栏色块跟随滑动.html 3KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html+css+js实现导航栏色块跟随滑动</title> <style> * { margin: 0px; padding: 0px; } ul { list-style: none; } html, body { height: 100%; width: 100%; background: black; } a { text-decoration: none; } ul { position: relative; background: #fff; overflow: hidden; display: flex; width: 50%; border-radius: 15px; height: 20px; padding: 10px 0px; left: 50%; top: 50%; transform: translate(-50%, -50%); } ul li { position: relative; z-index: 10; flex: 1; text-align: center; } ul li a { font-size:14px; color: #333; width: auto; padding:0px 10px; display: block; text-align: center; } ul li a:hover{ font-weight: bold; } .bg { width: 17%; height: auto; display: inline-block; background: #fc0; position: absolute; left: 0; top: 0px; bottom: 0px; margin: auto; z-index: 2; } </style> </head> <body> <ul> <span class="bg"></span> <li> <a href="javascript:;">首页</a> </li> <li> <a href="javascript:;">热播剧集</a> </li> <li> <a href="javascript:;">最新电影</a> </li> <li> <a href="javascript:;">影业资讯</a> </li> <li> <a href="javascript:;">娱乐八卦</a> </li> <li> <a href="javascript:;">明星图库</a> </li> </ul> <script> // 需求：鼠标经过哪个导航栏目，背景色滑动过去 var liList = document.getElementsByTagName('li'); var bg = document.getElementsByClassName('bg')[0]; var header = 0; var liLeft = 0; console.log(0); // 添加事件 // 遍历li for (var i = 0; i < liList.length; i++) { liList[i].onmouseover = function () { liLeft = this.offsetLeft + (this.offsetWidth - bg.offsetWidth) / 2; } } // 使用定时器 setInterval(function () { header = header + (liLeft - header) / 10; bg.style.left = header + 'px'; }, 10) </script> </body> </html>

评论收藏

内容反馈