01-页面滚动事件
Document - 锐客网
>
body {
height: 3000px;
}div {
width: 200px;
height: 200px;
background-color: pink;
overflow: auto;
}
我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字
>
//监听整个页面滚动
// window.addEventListener('scroll', function() {
//// alert(1)
// })//监听div盒子的滚动
//获取div元素
let div = document.querySelector('div');
div.addEventListener('scroll', function() {
alert(1)
})
效果展示
文章图片
02-页面加载事件
Document - 锐客网
Document - 锐客网
>
body {
height: 3000px;
}div {
width: 200px;
height: 200px;
background-color: pink;
overflow: auto;
}
>
// 1. 等页面加载完毕执行以下代码
// window.addEventListener('load', function() {
//let div = document.querySelector('div');
//console.log(div);
// })
// 2. 等初始的HTML文档(DOM)被完全加载和解析完成之后，触发事件
document.addEventListener('DOMContentLoaded', function() {
let div = document.querySelector('div');
console.log(div);
})
我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字03-三大家族宽高对比
Document - 锐客网
>
* {
padding: 0;
margin: 0;
}div {
width: 150px;
height: 150px;
background-color: pink;
overflow: auto;
padding: 10px;
border: 10px solid red;
margin: 100px;
}
我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容
>
// 1. scrollWidth 和 scrollHeight(了解)实际内容的宽高,不包含滚动条,不含边框
let div = document.querySelector('div');
console.log(div.scrollHeight);
// 416 不带单位
console.log(div.scrollWidth);
// 150 不带单位
console.log('---------------------------------------------------------------------------------------');
// offset 盒子元素的大小=盒子本身的宽度和高度 + border + padding
console.log(div.offsetWidth);
console.log(div.offsetHeight);
console.log(div.offsetLeft);
console.log(div.offsetTop);
// client 当前可视区域 获取元素当前可见区域的宽高(不含边框，滚动条)
console.log('---------------------------------------------------------------------------------------');
console.log(div.clientHeight);
console.log(div.clientWidth);
console.log(div.clientLeft);
console.log(div.clientTop);
//边框的宽度 了解// // 2.被卷去的头部(包含上边框)和左侧(包含左边框)scrollLeft 和 scrollTop
// div.addEventListener('scroll', function() {
//console.log(this.scrollLeft);
//console.log(this.scrollTop);
// })
04-检测页面滚动的距离
Document - 锐客网
>
body {
height: 3000px;
}
>
// console.log(document.documentElement);
// 返回html标签document.documentElement=document.html,这种写法兼容，document.html不兼容
// 先做页面滚动事件
window.addEventListener('scroll', function() {
// console.log(1);
console.log(document.documentElement.scrollTop);
// console.log(document.documentElement.scrollLeft);
// scrollTop 和 scrollLeft 是可以修改的
document.documentElement.scrollTop = 500;
//不带单位})
// 再得到页面滚动距离
05-电梯导航案例
Document - 锐客网
>
* {
margin: 0;
padding: 0;
}body {
height: 3000px;
}.aside {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
}.item {
height: 40px;
line-height: 40px;
text-align: center;
padding: 0 10px;
cursor: pointer;
}.active {
background-color: red;
color: #fff;
}.content {
width: 660px;
margin: 400px auto;
}.neirong {
height: 300px;
margin-bottom: 20px;
color: #fff;
}.content1 {
background-color: red;
}.content2 {
background-color: blue;
}.content3 {
background-color: orange;
}.content4 {
background-color: yellowgreen;
}
男装/女装
儿童服装/游乐园
电子产品
电影/美食
男装/女装
儿童服装/游乐园
电子产品
电影/美食
>
// 1.获取元素
let items = document.querySelectorAll('.item');
let contents = document.querySelectorAll('.neirong');
// 2.左侧aside模块 点击谁谁变颜色
for (let i = 0;
i < items.length;
i++) {
items[i].addEventListener('click', function() {
// 找到上一个active 移除类
document.querySelector('.aside .active').classList.remove('active');
// 点击谁，谁添加
this.classList.add('active');
// 右侧内容跟随走动 让页面滚动到对应的offsetTop值
// console.log(contents[i].offsetTop);
// console.log(document.documentElement.scrollTop);
document.documentElement.scrollTop = contents[i].offsetTop;
})
}
// 3.右侧内容跟随走动
效果展示 【Web|Web APIs 实用案例】
文章图片
06-client家族
client家族 - 锐客网
>
// 当窗口变化的时候触发的事件
window.addEventListener('resize', function() {
// console.log(11);
let w = document.documentElement.clientWidth;
// console.log(document.documentElement.clientWidth);
// 获取可视区域的宽度
if (w >= 1500) {
document.body.style.backgroundColor = 'pink';
} else if (w > 540) {
document.body.style.backgroundColor = 'yellow'
} else {
document.body.style.backgroundColor = 'blue';
}
})
07-仿京东固定头部
Document - 锐客网
>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}.content {
overflow: hidden;
width: 1000px;
height: 3000px;
background-color: pink;
margin: 0 auto;
}.backtop {
display: none;
width: 50px;
left: 50%;
margin: 0 0 0 505px;
position: fixed;
bottom: 60px;
z-index: 100;
}.backtop a {
height: 50px;
width: 50px;
background: url(./images/bg2.png) 0 -600px no-repeat;
opacity: 0.35;
overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
}.header {
position: fixed;
/* 隐藏盒子，把盒子放到上面 */
top: -80px;
left: 0;
width: 100%;
height: 80px;
background-color: purple;
text-align: center;
color: #fff;
line-height: 80px;
font-size: 30px;
transition: all .3s;
}.sk {
width: 300px;
height: 300px;
background-color: skyblue;
margin-top: 500px;
}
我是顶部导航栏
秒杀模块
>
let sk = document.querySelector('.sk')
let header = document.querySelector('.header')// 1.页面滚动事件
window.addEventListener('scroll', function() {
// 2.要检测滚动距离> = 秒杀盒子的offsetTop值 划入顶部导航栏
// console.log(document.documentElement.scrollTop);
// console.log(sk.offsetTop);
if (document.documentElement.scrollTop >= sk.offsetTop) {
header.style.top = '0';
} else {
header.style.top = '-80px';
}})
效果展示
文章图片
08-仿新浪返回顶部
Document - 锐客网
>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}.content {
width: 1000px;
height: 3000px;
background-color: pink;
margin: 0 auto;
}.backtop {
display: none;
width: 50px;
left: 50%;
margin: 0 0 0 505px;
position: fixed;
bottom: 60px;
z-index: 100;
}.backtop a {
height: 50px;
width: 50px;
background: url(./images/bg2.png) 0 -600px no-repeat;
opacity: 0.35;
overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
}
>
// 获取回顶部的元素
let backtop = document.querySelector('.backtop');
// 一. 1.页面滚动事件
window.addEventListener('scroll', function() {
// 2.检测页面滚动距离
// console.log(document.documentElement.scrollTop);
// 3.进行判断显示和隐藏
let num = document.documentElement.scrollTop;
if (num >= 500) {
//显示回顶部的元素
backtop.style.display = 'block';
} else {
// 否则隐藏元素
backtop.style.display = 'none';
}
})// 二.点击a返回顶部 a是backtop的第二个孩子
backtop.children[1].addEventListener('click', function() {
document.documentElement.scrollTop = 0;
})
效果展示
文章图片
09-轮播图案例
QQ音乐轮播图 - 锐客网
>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}li {
list-style: none;
}.main {
width: 700px;
margin: auto;
background: #000;
}.slides {
height: 320px;
position: relative;
}.slides ul li {
/* display: none;
*/
position: absolute;
top: 0;
left: 0;
opacity: 0;
/* 这里实现淡入淡出的关键 */
transition: all .3s;
}.slides li.active {
/* display: block;
*/
/* opacity元素的可见度，在0时会完全看不见，1表示完全可见 */
opacity: 1;
}.slides .extra {
width: 700px;
height: 53px;
line-height: 53px;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10;
}.slides .extra h3 {
width: 82%;
margin: 0;
margin-right: 20px;
padding-left: 20px;
color: #98E404;
font-size: 28px;
float: left;
font-weight: 500;
font-family: "Microsoft Yahei", Tahoma, Geneva;
}.slides .extra a {
width: 30px;
height: 29px;
display: block;
float: left;
margin-top: 12px;
margin-right: 3px;
background-image: url(./assets/icon_focus_switch.png);
}.slides .extra .prev {
background-position: 0 0;
}.slides .extra .prev:hover {
background-position: -30px 0;
}.slides .extra .next {
background-position: -60px 0;
}.slides .extra .next:hover {
background-position: -90px 0;
}.indicator {
padding: 10px 0;
}.indicator ul {
list-style-type: none;
margin: 0 0 0 4px;
padding: 0;
overflow: hidden;
}.indicator ul li {
position: relative;
float: left;
width: 60px;
margin: 0 4px 0 5px;
text-align: center;
cursor: pointer;
}.indicator li img {
display: block;
border: 0;
text-align: center;
width: 60px;
}.indicator li .mask {
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
}.indicator li .border {
display: none;
width: 54px;
position: absolute;
bottom: 0;
left: 0;
z-index: 20;
border: 3px solid #98E404;
}
/* li里面的mask 和 border 刚开始都是显示的 */
/* 我们写一个样式css */.indicator .active .mask {
display: none;
}.indicator .active .border {
display: block;
}
文章图片
class="mask">
class="border">
文章图片
class="mask">
class="border">
文章图片
class="mask">
class="border">
文章图片
class="mask">
class="border">
文章图片
class="mask">
class="border">
文章图片
class="mask">
class="border">
文章图片
class="mask">
class="border">
文章图片
class="mask">
class="border">
文章图片
class="mask">
class="border">
文章图片
class="mask">
class="border">
>
let lis = document.querySelectorAll('.indicator li');
// 获取图片的小li
let piclis = document.querySelectorAll('.slides ul li');
// 获取文字
let text = document.querySelector('.extra h3');
// 获取右侧按钮
let next = document.querySelector('.next');
// 获取左侧按钮
let prev = document.querySelector('.prev');
// 获取大盒子
let main = document.querySelector('.main');
// 需求1.小图标鼠标经过事件
// 鼠标经过小图片，当前变亮，其余变暗 添加类
// 给多个小li绑定事件
for (let i = 0;
i < lis.length;
i++) {
lis[i].addEventListener('mouseenter', function() {
// 选出唯一的那个active 删除类
document.querySelector('.indicator .active').classList.remove('active');
this.classList.add('active')// 需求2.大图片跟随变化
// 对应的大图片跟着显示 如果想要过渡效果，可以使用opacity,利用css淡入 淡出的效果，还是添加类
// 选出唯一的那个active 删除类
document.querySelector('.slides ul .active').classList.remove('active');
//对应序号的那个小li，加上类active
piclis[i].classList.add('active');
text.innerHTML = '第' + (i + 1) + '张图片的描述信息';
// text.innerHTML = `第${i+1}张图片的描述信息`//推荐使用// 需求④：解决一个BUG
// 点击右侧按钮可以实现播放下一张，但是鼠标经过前面的，播放就会乱序
// 解决方案：让变化量 index 重新赋值为 当前鼠标经过的索引号
// 鼠标经过了那个小li 他的索引号就是 i
// 右侧按钮是通过 index 来了控制播放的
index = i;
// 执行的是时候先执行let index = 0;
鼠标一经过调用回调函数再执行 index = i
})
}// 需求3：右侧按钮播放效果
//点击右侧按钮，可以自动播放下一张图片
//需要一个变化量index 不断自增
//然后播放下一张图片
//如果到了最后一张，必须要还原为第1张图片
//教你一招： 索引号 = 索引号 % 数组长度 （放到播放前面）
// 右侧按钮注册点击事件
let index = 0;
//全局变量 控制器为了给左侧按钮和右侧按钮同时使用
next.addEventListener('click', function() {
index++;
// 选出index 小图片 做操作
// 先删除其他的
// console.log(index);
// if (index === lis.length) { //index===10, 是小图片的数量
//index = 0;
// }
// 等同于以下代码
index = index % lis.length;
common();
})// 需求5：左侧按钮播放效果
//点击左侧按钮，可以自动播放上一张图片
//需要一个变化量index 不断自减
//然后播放上一张图片
//如果到了第一张，必须要从最后一张播放
//教你一招： 索引号 = (数组长度 + 索引号) % 数组长度
prev.addEventListener('click', function() {
index--;
// 选出index 小图片 做操作
// 先删除其他的
// console.log(index);
// if (index < 0) {
//index = lis.length - 1;
//lis.length-1 是 9
// }
// 等同于以下代码 可以记住上面的简单的方法
index = (lis.length + index) % lis.length
common();
})// 需求6：
//因为左侧按钮和右侧按钮里面有大量相同的操作，可以抽取封装一个函数 common
function common() {
document.querySelector('.indicator .active').classList.remove('active');
lis[index].classList.add('active');
// 选出index 大图片 做操作
document.querySelector('.slides ul .active').classList.remove('active');
piclis[index].classList.add('active');
text.innerHTML = '第' + (index + 1) + '张图片的描述信息';
}// 需求7：开启定时器
//其实定时器自动播放，就相当于点击了右侧按钮，此时只需要， next.click()
let timer = setInterval(function() {
//自动调用右侧按钮的点击事件
next.click();
}, 1000)// 需求8：
//鼠标经过大盒子停止定时器 （清除定时器）
main.addEventListener('mouseenter', function() {
clearInterval(timer)
})
// 鼠标离开，开启定时器
main.addEventListener('mouseleave', function() {
timer = setInterval(function() {
//自动调用右侧按钮的点击事件
next.click();
}, 1000)
})
效果展示
文章图片
推荐阅读
- Web|Web API 实用案例
- JavaScript|JavaScript循环及案例
- JavaScript|JavaScript数据类型
- 后端|字符串虐哭空巢老人记
- html|Html+Css+js实现春节倒计时效果
- 2022高频前端面试题合集|2022高频前端面试题——HTML篇
- three|three点击物体
- three|three贴图地面，雾气，克隆，贴图，打印所有模型，模型光源
- layui|layui压缩图片上传