1.实现效果：鼠标滑过箭头，显示出问题反馈，离开箭头，问题反馈隐藏
2.主要使用了动画函数。
注意：direction的定位变成固定定位，否则页面底部会出现左右的滚动条
3.代码实现：
动画函数：
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
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();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
},30)
}页面实现部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画函数的使用</title>
<style>
.direction {
position: fixed;
right: 0px;
top: 400px;
width: 40px;
height: 35px;
color: white;
line-height: 35px;
text-align: center;
}
.motion {
position: absolute;
width: 200px;
height: 35px;
left: 0px;
top: 0px;
z-index: -1;
background-color: blueviolet;
}
</style>
<script src="animate.js"></script>
</head>
<body>
<div class = "direction">
<span>←</span>
<div class="motion">问题反馈</div>
</div>
<script>
var direction = document.querySelector('.direction');
var motion = document.querySelector('.motion');
direction.addEventListener('mouseover', function(){
animate(motion, -160, function() {
direction.children[0].innerHTML = '→';
});
});
direction.addEventListener('mouseout', function(){
animate(motion, 0, function() {
direction.children[0].innerHTML = '←';
});
})
</script>
</body>
</html>
