1.png
当我鼠标移动到指定的a标签之后 元素块就会移动过去
3.png
接下来鼠标移走 小元素会自动回归过去
2.png
先来理一下思路
再做之前我先用一下黑马程序员pink老师已经封好的动画函数
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
我们首先要写好html结构和css样式
这里我简单的写一个简单的
<div class="box" id="box">
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
<div class="jingdou"></div>
</div>
<style>
* {
list-style: none;
}
.box {
position: relative;
margin: 0 400px;
}
li {
float: left;
margin: 200px 50px;
}
.jingdou {
position: absolute;
top: 230px;
left: 13px;
height: 10px;
width: 100px;
background-color: rgb(146, 88, 88);
}
</style>
然后我们调用动画函数
写出js
window.addEventListener('load', function() {
// 首先我们先获取所需要的标签
var boxbig = document.querySelector('box');
var jingdou = document.querySelector('.jingdou');
// 底下这个querySelectorAll如果你获得的元素值为空的话，请注意，我这里的box用的是 id="box" 是id选择器
// 在这里 我们如果想获得某一元素下的 元素 我们用class 类命名 可能会得到的是空值null
// 所以我选择用id选择器 这样就可以直接的获取元素下的元素
var lis = box.querySelectorAll('li')
// 用for循环去遍历每一个小li
for (var i = 0; i < lis.length; i++) {
// 这里我们用鼠标移动事件
lis[i].addEventListener('mouseenter', function() {
animate(jingdou, this.offsetLeft);
// 这里我们调用动画函数 第一个写要动的那个元素块 第二个 this.offsetLeft 表示获取他的移动位置 借用着动画函数
// 我们就可以让元素块移动过去
});
// 然后我们继续用鼠标离开事件
lis[i].addEventListener('mouseleave', function() {
// 这里我们鼠标移走的时候让他的移动位置回归为0，然后这个元素块就移动回去了
animate(jingdou, 0);
});
}
})
然后我们即可实现 类似于导航栏底下跟随一个元素块移动的简单例子
以下是所有的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
list-style: none;
}
.box {
position: relative;
margin: 0 400px;
}
li {
float: left;
margin: 200px 50px;
}
.jingdou {
position: absolute;
top: 230px;
left: 13px;
height: 10px;
width: 100px;
background-color: rgb(146, 88, 88);
}
</style>
<script>
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
window.addEventListener('load', function() {
// 首先我们先获取所需要的标签
var boxbig = document.querySelector('box');
var jingdou = document.querySelector('.jingdou');
// 底下这个querySelectorAll如果你获得的元素值为空的话，请注意，我这里的box用的是 id="box" 是id选择器
// 在这里 我们如果想获得某一元素下的 元素 我们用class 类命名 可能会得到的是空值null
// 所以我选择用id选择器 这样就可以直接的获取元素下的元素
var lis = box.querySelectorAll('li')
// 用for循环去遍历每一个小li
for (var i = 0; i < lis.length; i++) {
// 这里我们用鼠标移动事件
lis[i].addEventListener('mouseenter', function() {
animate(jingdou, this.offsetLeft);
// 这里我们调用动画函数 第一个写要动的那个元素块 第二个 this.offsetLeft 表示获取他的移动位置 借用着动画函数
// 我们就可以让元素块移动过去
});
// 然后我们继续用鼠标离开事件
lis[i].addEventListener('mouseleave', function() {
// 这里我们鼠标移走的时候让他的移动位置回归为0，然后这个元素块就移动回去了
animate(jingdou, 0);
});
}
})
</script>
</head>
<body>
<div class="box" id="box">
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
<div class="jingdou"></div>
</div>
</body>
</html>
