1.元素的scroll 属性,scroll 翻译过来是滚动的意思
<!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>
<style>
.father {
width: 500px;
height: 300px;
background-color: orange;
margin: 0 auto;
overflow: auto;
}
.son {
width: 700px;
height: 700px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
// scrollTop scrollLeft 元素被卷进去的距离
var father = document.getElementsByClassName('father')[0];
father.onscroll = function () {
console.log(father.scrollTop);
console.log(father.scrollLeft);
}
// scrollWidth scrollHeight 返回自身实际的宽度和高度(包含边框)
father.onscroll = function () {
console.log(father.scrollWidth);
console.log(father.scrollHeight);
}
</script>
</body>
</html>
2.window的坐标属性
<!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>
<style>
div {
width: 2000px;
height: 2000px;
border: 1px solid black;
}
</style>
</head>
<body>
<div></div>
<script>
// var box = document.getElementsByTagName('div')[0];
// window.innerWidth 窗口的宽度
// window.innerHeight 窗口的高度
console.log(window.innerHeight);
console.log(window.innerWidth);
// window.pageXOffset 窗口被卷到左边的大小
console.log(window.pageXOffset);
// window.pageYOffset 窗口被卷到上面的大小
console.log(window.pageYOffset);
</script>
</body>
</html>
3.楼层导航案例
<!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>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 60px;
background-color: #000;
}
.banner {
width: 100%;
height: 600px;
background-color: pink;
}
.content {
width: 1200px;
margin: 0 auto;
}
.content div {
height: 800px;
width: 100%;
font-size: 40px;
font-weight: bold;
color: #fff;
text-align: center;
line-height: 800px;
}
.xsms {
background-color: springgreen;
}
.phb {
background-color: skyblue;
}
.foryou {
background-color: purple;
}
.family {
background-color: orange;
}
.phone {
background-color: greenyellow;
}
.bottom {
width: 100%;
height: 300px;
background-color: #000;
}
.slid-bar {
width: 150px;
position: fixed;
top: 50%;
left: 100px;
margin-top: -75px;
display: none;
}
.slid-bar div {
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="banner"></div>
<div class="content">
<div class="xsms box">限时秒杀</div>
<div class="phb box">排行榜</div>
<div class="foryou box">为你推荐</div>
<div class="family box">家用电器</div>
<div class="phone box">手机数码</div>
</div>
<div class="bottom"></div>
<div class="slid-bar">
<div>限时秒杀</div>
<div>排行榜</div>
<div>为你推荐</div>
<div>家用电器</div>
<div>手机数码</div>
</div>
<script>
//所有块儿节点
var box = document.getElementsByClassName('box');
// 获取侧栏节点
var bar = document.getElementsByClassName('slid-bar')[0];
//侧边栏子节点
var son = bar.children;
// 排他思想
function Fun(e) {
for (var i = 0; i < e.length; i++) {
e[i].style.backgroundColor = 'white';
}
}
// document.onscroll = function () {
// if (window.pageYOffset >= box[0].offsetTop && window.pageYOffset < box[1].offsetTop) {
// bar.style.display = 'block';
// Fun(son);
// son[0].style.backgroundColor = 'red';
// } else if (window.pageYOffset >= box[1].offsetTop && window.pageYOffset < box[2].offsetTop) {
// Fun(son);
// son[1].style.backgroundColor = 'red';
// } else if (window.pageYOffset >= box[2].offsetTop && window.pageYOffset < box[3].offsetTop) {
// Fun(son);
// son[2].style.backgroundColor = 'red';
// } else if (window.pageYOffset >= box[3].offsetTop && window.pageYOffset < box[4].offsetTop) {
// Fun(son);
// son[3].style.backgroundColor = 'red';
// } else if (window.pageYOffset >= box[4].offsetTop) {
// Fun(son);
// son[4].style.backgroundColor = 'red';
// } else {
// bar.style.display = 'none';
// }
// }
document.onscroll = function () {
for (var i = 0; i < box.length; i++) {
if (window.pageYOffset >= box[i].offsetTop) {
bar.style.display = 'block';
Fun(son);
son[i].style.backgroundColor = 'red';
}
if (window.pageYOffset < box[0].offsetTop) {
bar.style.display = 'none';
}
}
}
for (var j = 0; j < son.length; j++) {
son[j].index = j;
son[j].onclick = function () {
console.dir(this);
console.log(box[this.index]);
document.documentElement.scrollTop = box[this.index].offsetTop;
}
}
</script>
</body>
</html>
4.放大镜案例
<!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>
<style>
.box {
width: 400px;
height: 400px;
border: 1px solid #ccc;
position: relative;
}
.box img {
width: 100%;
}
.big {
width: 600px;
height: 600px;
border: 1px solid #ccc;
position: absolute;
left: 410px;
top: 0px;
overflow: hidden;
display: none;
}
.big .img {
width: 1500px;
position: absolute;
left: 0px;
top: 0px;
}
.mengban {
width: 150px;
height: 150px;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
left: 0px;
top: 0px;
display: none;
}
</style>
</head>
<body>
<div class="box">
<img src="https://pic.qqtn.com/up/2018-2/2018021600215298765.jpg" alt="">
<div class="big">
<img src="https://pic.qqtn.com/up/2018-2/2018021600215298765.jpg" alt="" class="img">
</div>
<div class="mengban"></div>
</div>
<script>
// 获取小盒子节点
var box = document.getElementsByClassName('box')[0];
// 获取大盒子节点
var big = document.getElementsByClassName('big')[0];
// 获取蒙版节点
var mengban = document.getElementsByClassName('mengban')[0];
// 获取大图片节点
var img = document.getElementsByClassName('img')[0];
// 给小盒子加入鼠标移入事件
box.onmouseenter = function () {
// 让蒙版显示
mengban.style.display = 'block';
// 让大盒子显示
big.style.display = 'block';
// 比例
var scale = (img.offsetWidth - big.offsetWidth) / (box.offsetWidth - mengban.offsetWidth);
// 给大盒子添加鼠标移入事件
box.onmousemove = function (e) {
// 蒙版的左偏移量=
mengban.style.left = e.clientX - box.offsetLeft - mengban.offsetWidth / 2 + 'px';
if (mengban.offsetLeft > box.offsetWidth - mengban.offsetWidth) {
mengban.style.left = box.offsetWidth - mengban.offsetWidth + 'px';
} else if (mengban.offsetLeft < 0) {
mengban.style.left = 0 + 'px';
}
mengban.style.top = e.clientY - box.offsetTop - mengban.offsetTop / 2 + 'px';
if (mengban.offsetTop > box.offsetHeight - mengban.offsetHeight) {
mengban.style.top = box.offsetHeight - mengban.offsetHeight + 'px';
} else if (mengban.offsetTop < 0) {
mengban.style.top = 0 + 'px';
}
img.style.left = -mengban.offsetLeft * scale + 'px';
img.style.top = -mengban.offsetTop * scale + 'px';
}
// 给大盒子添加鼠标离开事件
box.onmouseleave = function () {
mengban.style.display = 'none';
big.style.display = 'none';
}
}
</script>
</body>
</html>