scroll系列属性
- scrollTop/scrollLeft/ScrollWidth/scrollHeight
- overflow:auto 使滑动自动显示
- 页面被卷去的头部:可以通过window.pageYOffset获得如果是被卷的是左window.pageXoffset
- 注意,元素被卷去的头部是elent.scollTop ,如果是页面被卷去的头部则是window.pageYoffset
<body>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box1 {
width: 400px;
height: 200px;
background-color: rgb(37, 150, 47);
margin: 10px auto;
}
.box2 {
width: 400px;
height: 400px;
background-color: rgb(37, 127, 150);
margin: 10px auto;
}
.box3 {
width: 400px;
height: 1000px;
background-color: rgb(141, 37, 150);
margin: 10px auto;
}
.aside {
position: absolute;
width: 50px;
height: 150px;
background-color: rgb(141, 133, 26);
top: 300px;
right: calc(50% - 250px);
padding: 10px;
padding-top: 30px;
text-align: center;
border-radius: 10px;
}
.aside span{
display: none;
cursor: pointer;
}
</style>
<div class="aside"><span>返回顶部</span></div>
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
<div class="box3">盒子三</div>
<script>
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
var box3 = document.querySelector('.box3');
var asidese = document.querySelector('.aside');
var bon = asidese.offsetTop - box2.offsetTop
document.addEventListener('scroll', function () {
console.log(box2.offsetTop);
console.log('aside的距离'+asidese.offsetTop);
if (pageYOffset >= box2.offsetTop) {
asidese.style.position = 'fixed';
asidese.style.top = bon + 'px'
}
else{
asidese.style.position = 'absolute';
asidese.style.top = '300px'
}
if (pageYOffset >= box3.offsetTop) {
asidese.children[0].style.display = 'block';
}else{
asidese.children[0].style.display = 'none';
}
})
console.log("box3的值"+box3.offsetTop);
var btn = asidese.children[0];
console.log(asidese.children[0]);
btn.addEventListener('click',function(){
document.body.scrollTop = document.documentElement.scrollTop = 0;
})
</script>
三大系列的对比
offsetWidth
返回自身,并且包括padding,border,不带单位,经常用于获取元素的位置clientWidth
返回自身,但是不包括border,包括padding,经常用于获取元素的大小scrollWidth
返回自身实际的宽度,元素的内容,但是不含边框返回数值不带单位 经常用于获取滚动的距离,注意
页面滚动 通过window.pageXoffset
获得,元素滚动距离通过scrollTop
或者scrollLeft
获取
mouseover和mouseenter的区别
mouseover
:鼠标经过自身盒子触发,子盒子也会触发mouseenter
:鼠标经过自身盒子才会触发,不会进行冒泡处理
动画函数的封装
- 动画原理:使用定时器+元素定位+元素offset
- 给不同元素指定不同的定时器
- 缓动动画的原理:使用动画缓动执行,使速度慢慢停下来(目标值-现在的位置)
- 缓动动画需要将步长值改为整数,使用Math.ceil函数 向上取整
- 缓动动画也可以添加回调函数
<style>
* {
padding: 0;
margin: 0;
}
.box {
position: absolute;
left: 0;
width: 100px;
height: 100px;
margin: 100px;
background-color: rgb(6, 143, 153);
}
span{
position: absolute;
left: 0;
width: 100px;
height: 100px;
margin: 210px;
margin-left: 100px;
background-color: rgb(21, 8, 139);
}
</style>
<div class="box"></div>
<span></span>
<script>
var box = document.querySelector('.box');
var span =document.querySelector('span')
function animate(obj, target) {
clearInterval(obj.timer)
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
clearInterval(timer)
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 150)
}
var box1= animate(box, 800);
var span1 = animate(span,900)
</script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
position: absolute;
display: block;
left: 0;
width: 100px;
height: 100px;
margin: 100px 0;
background-color: rgb(6, 143, 153);
}
span {
position: absolute;
left: 0;
width: 100px;
height: 100px;
margin: 200px 0;
background-color: rgb(21, 8, 139);
}
</style>
<div class="box"></div>
<span></span>
<script>
var box = document.querySelector('.box');
var span = document.querySelector('span');
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)
}
var box1 = animate(box, 800, function () {
box.style.display = 'none'
});
var span1 = animate(span, 900)
</script>
缓动函数封装地址
【函数地址】
利用缓动函数做一个鼠标触碰后移动的案例
<!DOCTYPE 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>Document</title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
width: 100%;
overflow-x: hidden;
}
.container,.box,.box2{
border-radius: 10px 0 0 10px;
}
.container {
position: absolute;
right: 0px;
bottom: 50px;
width: 50px;
height: 50px;
background-color: rgb(83, 3, 3);
}
.box {
position: absolute;
width: 50px;
height: 50px;
right: 0;
bottom: 0px;
font-size: 20px;
font-weight: 600;
color: #fff;
text-align: center;
line-height: 50px;
background-color: rgb(42, 23, 94);
}
.box2 {
position: absolute;
right: -150px;
bottom: 0;
width: 150px;
height: 50px;
font-size: 20px;
font-weight: 600;
color: #fff;
text-align: center;
line-height: 50px;
background-color: rgb(42, 23, 94);
}
</style>
<div class="container">
<div class="box"><</div>
<div class="box2">你好世界</div>
</div>
<script>
var container = document.querySelector('.container');
var box2 = document.querySelector('.box2');
var box = document.querySelector('.box');
container.addEventListener('mouseover', function () {
animate(box2, -140, 15);
box.innerHTML = '>';
})
container.addEventListener('mouseout', function () {
animate(box2, 140, 15);
box.innerHTML = '<'
})
</script>
<script src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/animate.js"></script>
</body>
</html>