js盒子模型
client开头的
- 返回值是数字没有单位，
如果是小数，会向上取整,变成整数,内容是否溢出对其没有影响
- 具体属性:
- clientWidth clientHeight clientLeft clientTop
offset开头的
- 具体属性:
- offsetWidth offsetHeight offsetLeft offsetTop offsetParent
scroll开头的
- scrollWidth scrollHeight scrollLeft scrollTop
获取样式
- getComputedStyle(ele) ele.currentStyle
let winH=document.documentElement.clientHeight||document.body.clientHeight;
let winW=document.documentElement.clientWidth||document.body.clientWidth;
function offset(ele) {
let left = ele.offsetLeft;
let top = ele.offsetTop;
let parent = ele.offsetParent;
while (parent) {
left += (parent.offsetLeft + parent.clientLeft);
top += (parent.offsetTop + parent.clientTop);
parent = parent.offsetParent;
}
return {
left,
top
}
}
let bodyLeft = offset(box);
//utils
let utils = (function () {
function offset(ele) {
let left = ele.offsetLeft;
let top = ele.offsetTop;
let parent = ele.offsetParent;
while (parent) {
left += (parent.offsetLeft + parent.clientLeft);
top += (parent.offsetTop + parent.clientTop);
parent = parent.offsetParent;
}
return {
left,
top
}
}
//封装一个方法专门用来设置或者浏览器的某些属性
function win(attr,value){
if(value===undefined){
return document.documentElement[attr]||document.body[attr];
}
document.documentElement[attr]=value;
document.body[attr]=value;
}
return {
offset,win
}
})()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
background: red;
}
/* 1 */
/* #box{
position: absolute;
left:50%;
top:50%;
margin-top: -100px;
margin-left: -100px;
} */
/* 2 */
/* #box{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
} */
/* 3 */
/* #box{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
} */
/* 4 */
/* body{
height:600px;
display:flex;
justify-content:center;
align-items:center;
background:black;
} */
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script src="utils.js"></script>
<script>
let winW = utils.win("clientWidth");
let winH = utils.win("clientHeight");
//利用js给当前元素设置left和top值
box.style.position = 'absolute';
box.style.left = (winW - box.offsetWidth) / 2 + "px";
box.style.top = (winH - box.offsetHeight) / 2 + "px";
</script>
回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img:nth-child(n) {
width: 1920px;
display: block;
height: 1080px;
background: green;
}
img:nth-child(2n-1) {
background: red;
}
#back {
position: fixed;
bottom: 20px;
right: 2px;
width: 100px;
height: 100px;
border-radius: 50%;
background: yellow;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<img src="" >
<img src="" >
<img src="" >
<img src="" >
<img src="" >
<div id="back">冲</div>
<img src="" >
</div>
</body>
</html>
<script src="utils.js"></script>
<script>
let winH = utils.win("clientHeight"); //当前浏览器可视区域的高
window.onscroll = function () {
//onscroll会重复执行，滚动条一动就执行
//当浏览器滚动条卷曲的高度大于一屏时，显示回到顶部
let winT = utils.win("scrollTop"); //当前浏览器滚动条距离顶部的距离
if (winT >= winH) {
back.style.display = "block";
} else {
back.style.display = "none";
}
}
back.onclick = function () {
let winT = utils.win("scrollTop");
//分成20份，每次减去一份
let part = winT / 10;
let time1 = setInterval(function () {
winT -= part;
//赋值
utils.win("scrollTop", winT);
if (document.documentElement.scrollTop == 0) {
clearInterval(time1);
time1 = null;
}
}, 20)
}
</script>
思路
方法
- 新建一个空图片标签 new Image
- 检查图片的src是否有效，
图片.onload后的方法，无效就执行onerror的方法，类似与点击事件,不过是默认判断
window.onscroll是当页面滚动条滚动时，执行方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 580px;
height: 327px;
height: 200px;
margin: 800px auto;
}
img {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<div id="box">
<img src="./img/default.jpg" true-img="./img/1.jpg" >
</div>
</body>
</html>
<script src="utils.js"></script>
<script>
// 图片延迟加载 “图片懒加载”
// 1.结构中，我们用一个盒子包裹着图片（在图片不展示的时候，可以占据着这个位置，并且设置默认的背景图或者背景颜色）
// 2.最开始，IMG的SRC中不设置任何的图片地址，把图片的真实地址设置给自定义属性TRUE-IMG（最开始不展示图片:可以让图片隐藏）
// 3.当浏览器窗口完全展示到图片位置的时候，我们再去加载真实图片，并且让其显示出来（第一屏幕中的图片一般都会延迟加载，来等待其它资源先加载完）
let img = document.querySelectorAll("img")[0];
function jiazai() {
console.log(1);
if (img.flag) {
return;
}
let winH = utils.win("clientHeight"); //一屏幕的高
let winT = utils.win("scrollTop"); //滚动条上偏移
let boxH = box.offsetHeight; //盒子的高
let boxT = utils.offset(box).top; //盒子上偏移
if (winH + winT >= boxH + boxT) {
let trueImg = img.getAttribute("true-img");
let newImg = new Image; //创建一个空的img,如果src地址里的图片加载成功，会执行onload,加载失败执行onerror这是默认的
newImg.src = trueImg;
newImg.onload = function () {
img.src = trueImg;
img.flag = true;
img.style.opacity = 0.01;
let num = Number(img.style.opacity);
let time1 = setInterval(function () {
num += 0.01;
img.style.opacity = num;
if (num != 1) {
clearInterval(time1);
time = null;
}
}, 17)
}
// newImg.onerror=function(){
// img.src="./img/error.jpg"
// }
}
}
window.onscroll = jiazai;
</script>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
- 找不到素材资源介绍文章里的示例图片？
- 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
- 模板不会安装或需要功能定制以及二次开发？
- 请QQ联系我们
发表评论
还没有评论，快来抢沙发吧！