PC端网页特效
1、元素偏移量offset系列
1.1 offsett 概述
使用offset系列相关属性可以动态的得到该元素的位置、大小等。
- element.offsetParent——返回作为该元素有定位的父级元素,否则返回body
- element.offsetTop——返回元素相对带有定位父元素上方的偏移
- element.offsentLeft——返回元素相对带有定位父元素左边框的偏移
- element.offsetWidth——返回自身包括paddind、边框、内容区的宽度、返回数值不带单位
- element.offsetHeight——返回自身包括paddind、边框、内容区的高度、返回数值不带单位
1.2 offset 与 style 的区别
1.3 仿京东放大镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="放大镜效果.css">
<script src='放大镜效果.js'></script>
</head>
<body>
<div class="wrap">
<div class="img">
<img src="jackson.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="jackson1.jpg" alt="" class='bigImg'>
</div>
</div>
</body>
</html>
.wrap {
width: 460px;
height: 800px;
}
.img {
position: relative;
height: 450px;
border: 1px solid #ccc;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: #FEDE4F;
opacity: .5;
border: 1px solid #ccc;
cursor: move;
}
.big {
display: none;
position: absolute;
left: 470px;
top: 0;
width: 600px;
height: 600px;
border: 1px solid #ccc;
overflow: hidden;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
window.addEventListener('load', function() {
var img = document.querySelector('.img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
img.addEventListener('mouseover', function() {
mask.style.display = 'block';
big.style.display = 'block';
})
img.addEventListener('mouseout', function() {
mask.style.display = 'none';
big.style.display = 'none';
})
img.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// console.log(x, y);
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
var maskMax = img.offsetWidth - mask.offsetWidth;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
var bigImg = document.querySelector('.bigImg');
var bigMax = bigImg.offsetWidth - big.offsetWidth;
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
})
效果图:
2、元素可视化client系列
client 概述:使用client系列相关属性可以动态的得到该元素的位置、大小等。
- element.clientTop——返回元素上边框的大小
- element.clientLeft——返回元素左边框的大小
- element.clientWidth——返回自身包括paddind、内容区的宽度,不含边框,返回数值不带单位
- element.clientHeight——返回自身包括paddind、内容区的高度不含边框,返回数值不带单位
3、元素滚动scroll系列
3.1 scroll 概述:动态得到该元素的大小、滚动距离等。
- element.scrollTop——返回被卷去的上侧距离,返回数值不带单位
- element.scrollLeft——返回被卷去的左侧距离,返回数值不带单位
- element.scrollWidth——返回自身实际的宽度,不含边框,返回数值不带单位
- element.scrollHeight——返回自身实际的高度,不含边框,返回数值不带单位
3.2 仿淘宝固定侧边栏案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="仿淘宝固定侧边栏.css">
<script src="仿淘宝固定侧边栏.js"></script>
</head>
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
</body>
</html>
.slider-bar {
position: absolute;
left: 50%;
top: 300px;
margin-left: 600px;
width: 45px;
height: 130px;
background-color: purple;
}
.w {
width: 1200px;
margin: 10px auto;
}
.header {
height: 150px;
background-color: pink;
}
.banner {
height: 250px;
background-color: skyblue;
}
.main {
height: 1000px;
background-color: yellowgreen;
}
span {
display: none;
position: absolute;
bottom: 0;
}
window.addEventListener('load', function() {
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
var bannerTop = banner.offsetTop;
var sliderbarTop = sliderbar.offsetTop - bannerTop;
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
document.addEventListener('scroll', function() {
// console.log(window.pageYOffset);
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = 300 + 'px';
}
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
})
注意:页面滚动的距离通过 window.pageXOffset 获得。
4、动画函数封装
4.1 动画原理
核心原理:通过定时器 setInterval() 不断移动盒子位置。
实现步骤:
1、获得盒子当前位置
2、让盒子在当前位置加上1个移动距离
3、利用定时器不断重复这个操作
4、加一个结束定时器的条件
5、注意要添加定位,才能使用element.style.left
4.2 动画函数简单封装
函数需要传递两个参数:动画对象、移动到的距离。
例如:
function animate( obj, target) { 动画行为 }
animate( div, 300);
5、常见网页特效案例
后面再补写
5.1 轮播图案例
5.2 返回顶部案例
5.3 筋斗云案例