目录
一、带动画返回顶部
案例分析:
- 可采用之前封装的函数动画animate.js
- 需将animate.js内left相关的值修改为和垂直滚动距离相关就可以
- 页面滚动多少,可以通过window.pageYOffset得到
.slider_bar {
position: absolute;
left: 50%;
top: 300px;
margin-left: 600px;
width: 45px;
height: 130px;
background-color: skyblue;
}
.w {
width: 1200px;
margin: 10px auto;
}
.header {
height: 150px;
background-color: red;
}
.banner {
height: 250px;
background-color: orange;
}
.main {
height: 1000px;
background-color: yellow;
}
span {
display: none;
position: absolute;
bottom: 0;
}
<div class="slider_bar">
<span class="back w">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主题内容</div>
<script>
var slider_bar = document.querySelector('.slider_bar');
var banner = document.querySelector('.banner');
var bannerTop = banner.offsetTop;
var slider_barTop = slider_bar.offsetTop - bannerTop;
var main = document.querySelector('.main');
var back = document.querySelector('.back');
var mainTop = main.offsetTop;
document.addEventListener('scroll',function(){
if(window.pageYOffset >= bannerTop){
// 页面滚动到header之后,侧边栏固定
slider_bar.style.position = 'fixed';
slider_bar.style.top = slider_barTop +'px';
} else {
slider_bar.style.position = 'absolute';
slider_bar.style.top = 300 +'px';
}
if(window.pageYOffset >= mainTop){
// 页面滚动到main,显示侧边栏内容
back.style.display = 'block';
} else {
back.style.display = 'none';
}
});
back.addEventListener('click', function(){
animate(window, 0);
});
// 动画函数
function animate(obj, target, callback) {
clearInterval(obj.timer)
// 给不同元素指定了不同定时器
obj.timer = setInterval(function(){
// 步长值写道定时器里
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - window.pageYOffset) / 10;
// 判断步长值的正负
step = step > 0 ? Math.ceil(step) :Math.floor(step);
if(window.pageYOffset == target){
clearInterval(obj.timer);
callback && callback();
} else {
// obj.style.left = window.pageYOffset + step +'px';
window.scroll(0,window.pageYOffset + step);
}
},15);
}
</script>
二、菜单栏跟随鼠标案例
鼠标经过菜单栏的某个li,颜色框就跟随到这个li位置
鼠标离开这个li,颜色框就复原为原来的位置
鼠标点击了单栏的某个li,颜色框就会留在点击这个小li的位置
案例分析:
- 利用动画函数做动画效果
- 原先颜色框的起始位置是0
- 鼠标经过某个li,就把当前 li 的 offsetLeft位置作为目标值即可
- 鼠标离开这个li,就把目标值设为0
- 如果点击了某个li,就把li当前卫视存储起来,当鼠标离开,颜色框就回到这个位置
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none;
}
body {
background-color: black;
}
.nav {
width: 900px;
height: 42px;
background: #fff;
margin: 100px auto;
border-radius: 5px;
position: relative;
}
.nav ul {
position: absolute;
}
.nav li {
float: left;
width: 83px;
text-align: center;
line-height: 42px;
}
.nav li a {
color: #333;
text-decoration: none;
display: inline-block;
height: 42px;
}
.nav li a:hover {
color: white;
}
.selPart {
position: absolute;
left: 0;
top: 0;
width: 83px;
height: 42px;
background: skyblue;
border-radius: 5px;
}
</style>
<body>
<div class="nav" id="nav">
<span class="selPart"></span>
<ul>
<li class="current"><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">商品模块</a></li>
<li><a href="#">活动模块</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">影视信息</a></li>
<li><a href="#">招聘信息</a></li>
<li><a href="#">留言反馈</a></li>
</ul>
</div>
</body>
<script src="animate.js"></script>
<script>
window.addEventListener('load',function(){
var selPart = document.querySelector('.selPart');
var nav = document.querySelector('.nav');
var lis = nav.querySelectorAll('li');
var current = 0;
for(var i = 0; i < lis.length; i++){
// 鼠标经过,移动颜色框到经过的li位置
lis[i].addEventListener('mouseenter',function(){
animate(selPart, this.offsetLeft);
});
// 鼠标离开
lis[i].addEventListener('mouseleave',function(){
animate(selPart, current);
});
lis[i].addEventListener('click',function(){
current = this.offsetLeft;
animate(selPart, current);
});
}
});
</script>