jquery实现导航栏随鼠标点击跟随滑动动画

来源：互联网发布：网易邮箱数据库在线查编辑：程序博客网时间：2024/06/02 12:37

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
line-height: 1.5;
}

.topnav {
position: relative;
z-index: 2;
font-size: 17px;
background-color: #5f5f5f;
color: #f1f1f1;
width: 100%;
padding: 0;
letter-spacing: 1px;
font-family: "Segoe UI", Arial, sans-serif;
}

.menu-bar .menu-button {
white-space: normal;
}

.menu-bar .menu-bar-item {
padding: 8px 16px;
float: left;
width: auto;
border: none;
outline: none;
display: block;
}

a.topnav-icons {
width: 52px !important;
font-size: 20px !important;
padding-top: 11px !important;
padding-bottom: 13px !important;
}

.topnav a {
padding: 10px 15px 9px 15px !important;
}

.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}

.menu-left {
float: left!important;
}

.menu-btn,
.menu-button {
border: none;
display: inline-block;
outline: 0;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
z-index: 200;
}

.menu-bar .menu-bar-item {
padding: 8px 16px;
float: left;
width: auto;
border: none;
outline: none;
display: block;
}

a:hover {
background: black;
}

.ss {
background: red;
}

#sel {
position: absolute;
background: red;
opacity: 0.5;
}
</style>
</head>

<body>
<div class="menu-card-2 topnav" id="topnav" style="position: relative;">
<div style="overflow:auto;">
<div class="menu-bar menu-left" style="width:100%;overflow:hidden; position: relative;" id="menu_container">
<a class="menu-bar-item menu-button initial" title="HTML Tutorial">HTML</a>
<a class="menu-bar-item menu-button active" title="CSS Tutorial">CSS</a>
<a class="menu-bar-item menu-button" title="JavaScript Tutorial">JAVASCRIPT</a>
<a class="menu-bar-item menu-button" title="SQL Tutorial">SQL</a>
<div class="menu-bar-item menu-button" id="sel"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">

$('a').ready(function() {

//点击事件

$('a').on('click', function() {

//获取当前标签的宽度值（返回值为具体数字）

$('#sel').width($(this).width());

$('#sel').height($(this).height());

//获取鼠标点击标签的位置

var top = $(this).position().top;
var left = $(this).position().left;

$('#sel').animate({

//加入位置信息

top: top,
left: left

//动画时长

500
)
});

})
</script>

</html>

阅读全文

1 0