js盒子模型
client 系列
clientWidth : 当前元素可视区域的宽度 = 宽度+左右padding
clientHeight : 当前元素可视区域的高度 = 高度+上下padding
clientLeft: 获取当前元素左边框的宽度
clientTop: 获取当前元素上边框的高度
1.获取的是数字,而且没有单位
2.他的值必须是整数,四舍五入
3.是可视区域的宽度高
offset系列
offsetWidth:当前元素总宽度 clientWidth + 左右border
offsetHeight:当前元素总高度 clientHeight + 上下border
offsetParent:父级参照物(position定位的,没有往body上找)
offsetLeft:左偏移量 :从当前元素的左外边框到父级参照物的左内边框
offsetTop:上偏移量 : 从当前元素的上外边框到父级参照物的上内边框
scroll系列
scrollHeight:如果当前元素的文本不溢出,那就等于clientHeight
如果当前元素溢出,那就是当前的高度+上下padding
scrollWidth:如果当前元素的文本不溢出,那就等于clientWidth
如果当前元素溢出,那就是当前的宽度+左右padding
scrollLeft:当前元素横向滚动条卷去的长度
scrollTop:当前元素纵向滚动条卷去的高度
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6245d46d7ed46631fc316d769cb0029a.png)
单张图片懒加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding:0;
margin: 0;
}
div {
width: 300px;
height: 400px;
margin: 800px auto;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="img/222.jpg" trueImg = "img/36.jpg" alt="">
</div>
<script src="js.js"></script>
<script>
let div = document.getElementsByTagName('div')[0];
let img = document.getElementsByTagName('img')[0];
let winH = win('clientHeight')
let curH = img.offsetHeight;
let curT = offset(img).top
window.onscroll = function(){
if(img.flag){return}
let winT = win('scrollTop');
if(winT+winH >curH+curT){
let address = img.getAttribute('trueImg')
let newImg = new Image;
console.log(newImg)
newImg.src = address;
newImg.onload = function(){
img.src = address;
fadeIn(img)
img.flag =true;
}
}
}
function fadeIn(img){
setCss(img,'opacity',0.1);
let cur = Number(getCss(img,'opacity'))
var timer = setInterval(()=>{
cur += 0.2
if(cur>=1){
clearInterval(timer)
}
setCss(img,'opacity',cur);
},200)
}
</script>
</body>
</html>
多张图片懒加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
body{
background: rgb(12, 245, 253);
}
div{
margin: 100px auto;
width: 1200px;
display: flex;
flex-wrap: wrap;
}
img {
box-sizing: border-box;
display: block;
width: 300px;
height: 400px;
margin-bottom: 10px;
padding: 10px;
}
#goBack{
width: 140px;
height: 140px;
border-radius: 50%;
line-height: 140px;
text-align: center;
background: rgba(248, 232, 13, 0.6);
color: green;
font-size: 30px;
font-weight: 400;
position: fixed;
right: 20px;
bottom: 20px;
display: none;
}
</style>
</head>
<body>
<div>
<img src="img/222.jpg" trueImg = "img/1.jpg" alt="">
</div>
<div id="goBack">
返回顶部
</div>
<script src="js.js"></script>
<script>
let back = document.getElementById('goBack')
let img = document.getElementsByTagName('img')
let winH = win('clientHeight');
function dly(){
for (var i = 0; i < img.length; i++) {
dlyImg(img[i])
}
let winM = win('scrollTop');
if(winM>winH){
css(back,'display','block')
}else{
css(back, 'display', 'none')
}
}
function dlyImg(img){
if(img.flag){return}
let curH = img.offsetHeight;
let curT = offset(img).top;
let winT = win('scrollTop');
if(winH+winT>curT+curH){
let address = img.getAttribute('trueImg');
let newImg = new Image;
newImg.src = address;
newImg.onload = function(){
img.src = address;
img.flag = true;
newImg = null;
fadeIn(img)
}
}
}
function fadeIn(img){
setCss(img,'opacity',0.05);
let cur = Number(getCss(img,'opacity'));
var timer = setInterval(()=>{
cur += 0.05;
if(cur>=1){
clearInterval(timer);
}
setCss(img,'opacity',cur);
},70);
}
dly()
window.onscroll = dly
back.onclick = function(){
let winL = win('scrollTop');
let dis = winL/50;
var timer = setInterval(()=>{
winL -= dis;
if(winL<=0){
clearInterval(timer)
}
win('scrollTop',winL);
},40)
}
</script>
</body>
</html>
点击回到页面顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0 ;
padding: 0;
}
#goBack{
width: 200px;
height: 200px;
border-radius: 50%;
line-height: 200px;
text-align: center;
background: goldenrod;
color: green;
font-size: 30px;
font-weight: 400;
position: fixed;
right: 20px;
bottom: 20px;
display: none;
}
</style>
</head>
<body>
<div id="box">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<img src="4.jpg" alt="">
</div>
<div id="goBack">
返回顶部
</div>
<script src="js.js"></script>
<script>
let back = document.getElementById('goBack')
back.onclick = function(){
let winT = win('scrollTop');
let dis = winT/50;
var timer = setInterval(()=>{
winT -= dis;
if(winT<=0){
clearInterval(timer)
}
win('scrollTop',winT);
},40)
}
window.onscroll = function(){
let winH = win('clientHeight')
let winT = win('scrollTop')
if(winT>winH){
css(back,'display','block')
}else{
css(back, 'display', 'none')
}
}
</script>
</body>
</html>```