功能简述
- 图片随着鼠标位置在导航栏上变化而变化
- 当点击某个导航栏时,图片位置迁移到当前导航栏的位置处
- 效果预览
实现原理
- 给每个li标签添加鼠标事件
- 当鼠标悬浮于li标签的时候,将当前li标签的offsetLeft值赋给图片的offsetLeft使其移动
- 当鼠标离开li标签的时候,图片offsetLeft的值重置为之前已点击的li标签的offsetLeft值
- 当鼠标点击li标签的时候,记录当前li标签的offsetLeft值,并当前li标签添加选中状态
- 涉及到的animate函数详见js动画函数实现侧边栏动态显示内容.
实现代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>practice1</title>
<link href="../css/practive1.css" rel="stylesheet"/>
<script src="../js/animate.js"></script>
<script type="text/javascript" src="../js/practice1.js"></script>
</head>
<body>
<div class="cloud">
<span class="img"></span>
<ul>
<li class="current"><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>
</div>
</body>
</html>
css
body {
background-color: #a3b0b5;
}
.cloud {
margin: 100px auto;
border-radius: 5px;
position: relative;
width: 500px;
height: 42px;
background: #fff url("../imgs/pig.jpg") no-repeat right center;
}
.cloud ul {
position: absolute;
text-align: center;
list-style-type: none;
margin-left: 0px;
padding: 0;
}
.cloud ul li{
top: 0;
margin: 0px 15px;
float: left;
text-align: center;
}
.cloud li a{
text-decoration: none;
color: #000;
display: inline-block;
}
.cloud li:hover {
color: #dc4c3f;
font-weight: 600;
}
.cloud ul li.current a{
color: #dc4c3f;
font-weight: 600;
}
.cloud span {
position: absolute;
top: 0px;
background: url('../imgs/lovefly.gif') no-repeat;
/* 图片随屏幕大小同步缩放*/
background-size: cover;
/* 图片的位置居中靠左对齐*/
background-position: center 0;
width: 50px;
height: 40px;
}
js
window.addEventListener('pageshow',function () {
var cloud = document.querySelector('.cloud');
var img = cloud.querySelector('.img');
var lis = cloud.querySelectorAll('li');
//图片最初的位置
var imgLeft = img.offsetLeft;
// 为每个li标签添加鼠标事件
for (var i = 0; i < lis.length; i++) {
// 鼠标悬浮事件
lis[i].addEventListener('mouseenter',function () {
animate(img,this.offsetLeft,15);
})
// 鼠标离开事件
lis[i].addEventListener('mouseleave',function () {
animate(img,imgLeft,15);
})
// 鼠标点击事件
lis[i].addEventListener('click',function () {
imgLeft = this.offsetLeft;
// 采用排他思想 去除其他的current选中样式
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
})
}
})