运行结果图:
JS思路:
两个高度相同的盒子,初始状态(1),紫色盒子在粉色盒子里面(2),鼠标经过时,紫色盒子滑动到粉色盒子左侧,鼠标离开紫色盒子滑动到右侧(3),鼠标离开回复原装(1)
关键:在于理解js动态运行函数,同时也要熟练掌握css内容的书写,才能够完整的将此效果实现!
样式、html:附加箭头细节
<!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>11.15</title>
<script src="../Js/animate.js"></script>
<style>
.sliderbar {
right: 0;
top: 300px;
position: absolute;
width: 40px;
height: 40px;
text-align: center;
line-height: 35px;
background-color: pink;
}
.con {
width: 200px;
height: 40px;
position: absolute;
top: 0;
text-align: center;
background-color: purple;
z-index: -1;
}
</style>
</head>
<body>
<div class="sliderbar">
<span>←</span>
<div class="con">问题反馈</div>
</div>
<script>
var sliderbar = document.querySelector('.sliderbar');
var con = document.querySelector('.con');
//mouseenter 和mouseover最大的区别是前者没有冒泡
sliderbar.addEventListener('mouseenter', function() {
animate(con, -160, function() {
//直接调用sliderbar的第一个孩子
sliderbar.children[0].innerHTML = '→';
});
})
sliderbar.addEventListener('mouseleave', function() {
animate(con, 0, function() {
sliderbar.children[0].innerHTML = '←';
});
})
</script>
</body>
</html>
js:动画运行封装函数
<!--js名称:animate.js-->
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';
}, 15);
}