<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js+css3下划线文字导航菜单特效 - 网页模板</title>
<style>
body {
background: #ededed;
padding: 0 20px;
margin: 0;
font-family: 'Open Sans', Arial, sans-serif;
}
h1 {
text-align: center;
margin: 80px 0;
}
.mynav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
}
.mynav li:not(:last-child) {
margin-right: 20px;
}
.mynav a {
display: block;
font-size: 20px;
color: black;
text-decoration: none;
padding: 7px 15px;
}
.target {
position: absolute;
border-bottom: 4px solid transparent;
z-index: -1;
-webkit-transform: translateX(-60px);
transform: translateX(-60px);
}
.mynav a,
.target {
-webkit-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}</style>
</head>
<body>
<h1>鼠标悬停动画事件</h1>
<nav class="mynav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Company</a></li>
<li><a href="">Work</a></li>
<li><a href="">Clients</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<span class="target"></span>
<script>
"use strict";
(function () {
var target = document.querySelector(".target");
var links = document.querySelectorAll(".mynav a");
var colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];
function mouseenterFunc() {
if (!this.parentNode.classList.contains("active")) {
for (var i = 0; i < links.length; i++) {
if (links[i].parentNode.classList.contains("active")) {
links[i].parentNode.classList.remove("active");
}
links[i].style.opacity = "0.25";
}
this.parentNode.classList.add("active");
this.style.opacity = "1";
var width = this.getBoundingClientRect().width;
var height = this.getBoundingClientRect().height;
var left = this.getBoundingClientRect().left + window.pageXOffset;
var top = this.getBoundingClientRect().top + window.pageYOffset;
var color = colors[Math.floor(Math.random() * colors.length)];
target.style.width = width + "px";
target.style.height = height + "px";
target.style.left = left + "px";
target.style.top = top + "px";
target.style.borderColor = color;
target.style.transform = "none";
}
}
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function (e) {
return e.preventDefault();
});
links[i].addEventListener("mouseenter", mouseenterFunc);
}
function resizeFunc() {
var active = document.querySelector(".mynav li.active");
if (active) {
var left = active.getBoundingClientRect().left + window.pageXOffset;
var top = active.getBoundingClientRect().top + window.pageYOffset;
target.style.left = left + "px";
target.style.top = top + "px";
}
}
window.addEventListener("resize", resizeFunc);
})();</script>
<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
js+css3下划线文字导航菜单特效.zip
版权申诉
113 浏览量
2022-11-24
12:31:07
上传
评论
收藏 2KB ZIP 举报
js+css3下划线文字导航菜单特效.zip （1个子文件） 
js+css3下划线文字导航菜单特效 jiaoben4983 
index.html 4KB资源评论
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+
最新资源
- 联邦学习框架下基于Memae的异常检测python源码+运行说明.zip
- 簇联邦学习改进python实现源码+项目说明+代码注释提高精度+缓解用户孤立问题.zip
- 毕设基于DAG区块链的联邦学习框架实现去中心化和个性化源码+使用说明.zip
- 邻接表PRIM最小生成树.cpp
- 基于MATLAB实现传统图像去噪算法和深度学习DnCNN模型图像去噪源码+项目说明.zip
- 数据处理数据图像处理大作业-图割源码.zip
- 图书管理系统c语言实现的项目源代码.zip
- 毕设项目基于深度学习的热轧带钢表面缺陷自动检测设计与实现python源码+PPT演讲+模型.zip
- 01 背包问题限定条件最优解动态规划算法.zip
- 0- 1背包动态规划解决问题思路及原理.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
