1 a链接
- 如果href未设置，或设置为#；页面会默认跳转到顶部
- 阻止a链接跳转：
- 设置：
<a href="javascript:;">...</a>; - 设置：
<a href="javascript:void(0);">...</a>;
- 设置：
- a链接一般可以用于锚点设置
- 代码：锚链
<a href="#div1">..</a>，锚点<div id="div1">..</div>;
- 代码：锚链
2 回到顶部实例
- 思路：
- Css样式中a标签为行内元素，无法设置宽高，但是当添加固定定位后，脱离文档流，默认转为块状元素，可以设置宽高；
- 给按钮添加点击事件，确定速度与频率，进而确定步长，然后针对浏览器卷去的长度来进行比较，利用定时器进行多次操作，函数内获取实时的卷去长度，减等步长，再设置新的卷去长度，反复进行，判断实时的卷去长度是否小于等于0，此时设置卷去长度为0，即回到顶部，clearInterval关闭定时器，return阻断程序执行；
- 升级1：当卷去长度小于等于一屏的高度时，按钮隐藏，当卷去长度大于一屏的高度后，按钮显示，一屏的高度用clientHeight来获取，设置样式用
oBtn.style.display="block"，给window添加onscroll滚动事件； - 升级2：当点击按钮后，让按钮隐藏，所以在点击事件中添加
this.style.display="none";,当每次点击后，按钮都会隐藏；但是会出现bug，按钮隐藏后，会立刻显示，因为与onscroll事件冲突，所以需要在点击事件中添加window.onscroll=null，给事件赋值null，事件不执行，当点击事件中，计时器停止后，即回到顶部，在重新设置滚动事件window.onscroll=add;add指的是函数的定义阶段，添加位置一定要在return前面，定时器停止后；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到顶部</title> <style> *{ margin: 0; padding: 0; } .wrap{ width: 100%; height: 3000px; background: -webkit-linear-gradient(top,lightskyblue,lightsalmon,lightseagreen,red); } .wrap a{ width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; background-color: yellow; font-size: 10px; color: black; font-weight: bold; text-decoration: none; position: fixed; right: 20px; bottom: 20px; display: none; } </style> </head> <body> <div class="wrap"><a href="javascript:void(0);">toTop</a></div> <script src="utils2.js"></script> <script> //添加点击事件，确定步长step，由速度和频率决定，v,f,总距离为scrollTop浏览器卷去的长度 //升级1 卷去距离小于一屏的高度，按钮隐藏，大于后，按钮显示，添加滚动事件onscroll //升级2 当点击事件触发时，按钮消失，回到顶部 var oBtn=document.getElementsByTagName("a")[0]; window.onscroll=add; function add(){ var curScroll=utils.win("scrollTop"); if(curScroll>=utils.win("clientHeight")){ oBtn.style.display="block"; }else{ oBtn.style.display="none"; } } oBtn.onclick=function () { this.style.display="none"; window.onscroll=null;//事件赋值null，事件停止 var v=1; var f=10; var step=v*f; var timer=setInterval(function () { var curTop=utils.win("scrollTop"); curTop-=step; if(curTop<=0){ utils.win("scrllTop",0); clearInterval(timer); window.onscroll=add;//一定要放在return前面 return;//阻断程序执行； } //改变curTop后，要设置 utils.win("scrollTop",curTop); }); }; </script> </body> </html>
3 回到顶部随时停下实例
- 知识点：
- 需求：在点击事件触发后，回到顶部过程中，滑动滚轮使其停止
- 思路：添加开关oBk，给其赋值为false，在滚动事件中进行判断，当oBk为true时，点击事件中的定时器停止，判断条件后在滚动事件中给bOk重新赋值true，因为滚动事件发生会连续触发多次，将oBk赋值为true，才能停止，前提是要快过点击事件中的定时器的重复执行时间，在点击事件定时器后，要给oBk重新赋值为false
- 注意点：
- 点击事件中的timer要设为全局变量，因为点击事件和滚动事件是两个函数，会形成两个私有作用域，两者之间是不会相互查找的；
- 点击事件中在最后要给oBk赋值为false,滚动事件中，给oBk赋值为true,一定要在判断条件之后；
- 保证能够停下来，点击事件中的定时器触发时间要在20s以上；
- 在回到顶部实例中，在点击事件中会设置
window.onscroll=null，如果添加此代码，不能再停止，因为滚动事件已经被赋值为null，没有了点击事件；
<script> //升级3 当手动滚动时，让回到顶部中的定时器停止 //分析：onscroll时间当滚动一下就会触发多次，但是要保证滚动的连续触发时间大于定时器的触发时间f;f一般大于20就可以； //注意：停的定时器timer为全局变量，定时器的时间需要在20以上，添加开关 var oBtn=document.getElementsByTagName("a")[0]; var bOk=false; var timer=null; window.onscroll=add; function add(){ if(bOk){ clearInterval(timer); } bOk=true; var curScroll=utils.win("scrollTop"); if(curScroll>=utils.win("clientHeight")){ oBtn.style.display="block"; }else{ oBtn.style.display="none"; } } oBtn.onclick=function () { this.style.display="none"; //window.onscroll=null;//事件赋值null，事件停止 var v=1; var f=30; var step=v*f; timer=setInterval(function () {//timer要设置为全局变量，才能在滚动事件中获取到 var curTop=utils.win("scrollTop"); curTop-=step; if(curTop<=0){ utils.win("scrllTop",0); clearInterval(timer); return;//阻断程序执行； } //改变curTop后，要设置 utils.win("scrollTop",curTop); bOk=false; },f); }; </script>
4 回到顶部点击隐藏+随时停下实例
- 知识点：
- 需求：在点击回到顶部按钮，按钮隐藏，在回到顶部过程中，滑动滚轮使其停止
- 思路：终极版升级，通过设置两个滚动函数，一个目的是判断按钮的显示和隐藏；一个目的是滑动鼠标滚轮，滚动停止；
- 注意点：
- 页面加载时，给window.onscroll赋值为scrollDisplay函数，根据卷去高度来判断按钮的显示和隐藏；
- 点击事件触发后，按钮隐藏，并给window.onscroll重新赋值为scrollStop函数，此时就可以通过滑动鼠标滚轮来随时停下滚动条了；
- 当停下滚动条后，即在scrollStop函数中停止定时器时，必须重新给window.onscroll赋值为scrollDisplay，用来判断停下时刻，按钮是显示还是隐藏；
- 在定时器匿名函数中，当卷去高度为0时，停止定时器后，一定要再给window.onscroll赋值为scrollDisplay;此时才能恢复到点击前的初始效果；
<script> var oBtn=document.getElementsByTagName("a")[0]; var bOk=false; var timer=null; window.onscroll=scrollDisplay; oBtn.onclick=function () { this.style.display="none"; window.onscroll=scrollStop;//事件赋值scrollStop函数，事件可以随时停下； var v=1; var f=30; var step=v*f; timer=setInterval(function () {//timer要设置为全局变量，才能在滚动事件中获取到 var curTop=utils.win("scrollTop"); curTop-=step; if(curTop<=0){ utils.win("scrllTop",0); clearInterval(timer); window.onscroll=scrollDisplay; return;//阻断程序执行； } //改变curTop后，要设置 utils.win("scrollTop",curTop); bOk=false; },f); }; //判断按钮的显示和隐藏 function scrollDisplay(){ var curScroll=utils.win("scrollTop"); if(curScroll>=utils.win("clientHeight")){ oBtn.style.display="block"; }else{ oBtn.style.display="none"; } } //鼠标滑动立即停下 function scrollStop(){ if(bOk){ clearInterval(timer); window.onscroll=scrollDisplay; } bOk=true; } </script>
5 元素分步显示实例
- 知识点：
- 利用定时器来控制元素的显示的时间间隔，利用全局变量n的变化来作为元素集合的索引值，进行遍历操作；
- 代码中span为行内元素，所以会设置
display:inline-block,不能再设置display:none，可以利用透明度来隐藏；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素分步显示</title> <style> span{ display: inline-block; width: 100px; height: 100px; line-height: 100px; border-radius: 50px; margin: 10px; text-align: center; background-color: red; font-size: 30px; opacity: 0; } </style> </head> <body> <span>恭</span><span>喜</span><span>大</span><span>家</span><span>发</span><span>财</span> <script> var aSpan=document.getElementsByTagName("span"); var n=0; var timer=setInterval(function () { if(n>=aSpan.length){ clearInterval(timer); return;//阻断程序执行 } aSpan[n++].style.opacity=1; },400) </script> </body> </html>
6 单张图片的延迟加载实例
- 知识点：
- 两个事件，onload事件元素加载成功触发，onerror事件，元素加载失败触发；
- 图片加载附地址时，可以新建一个替身图片，可以用
tempImg=new Image创建，也可以用tempImg=document.createElement("image")创建； - 元素身上系统属性可以用点获取或设置，但是元素身上已经定义过的自定义属性，不能用点获取，必须用getAttribute获取；
- 寻找元素的父级结构元素，利用
ele.parentNode获取 - 设置元素的行间样式，用点就能设置，设置元素的非行间样式，用style设置；
- 思路：
- 图片要成功加载，必须触发滚轮事件
window.onscroll - 图片加载的条件：
img.offsetTop+img.offsetHeight<scrollTop+clientHeight; - 图片开始加载
- 1)先找一个临时的图片对象
tempImg=new Image等同于tempImg=document.createElement("image"); - 2)把要用的图片地址，利用tempImg校验下
- 3)校验结果：onload onerror
- 4)如果成功，则触发onload事件，把正确的地址赋值给真正的img标签，一定要注意性能优化
- 图片只加载一次img.loaded=true;
- 释放临时图片对象
tempImg=null;
- 5)如果不成功，则触发onerror事件，同上；
- 1)先找一个临时的图片对象
- img标签的src属性必须添加值，否则img不显示，就没有offsetHeight值；
- 图片要成功加载，必须触发滚轮事件
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单张图片延迟加载</title> <style> body,html{ width: 100%; height: 200%; } div{ position: absolute; top: 1000px; } p{ width: 200px; height: 200px; background: url("image/2.jpg") center no-repeat #ffffff; background-size: 100% 100%; } p img{ width: 100%; height: 100%; } </style> </head> <body> <div> <p><img src="image/2.jpg" realImage="image/1.jpg"/></p> </div> <script src="utils2.js"></script> <script> var oImg=document.getElementsByTagName("img")[0]; window.onscroll=function () { var scrollBot=utils.win("scrollTop")+utils.win("clientHeight"); var imgTop=utils.offset(oImg).Top+oImg.offsetHeight; if(imgTop<scrollBot){ Lazyload(); } }; function Lazyload() { //避免重复加载 if(oImg.loaded){ return;//阻断程序执行； } //新建一个临时的替身图片 var tempImg=new Image();//也可以写成tempImg=document.createElement("img") //将地址赋给临时替身图片，验证替身图片是否加载成功 tempImg.src=oImg.getAttribute("realImage");//元素身上已经存在的自定义属性，不能有点来获取 //加载成功 tempImg.onload=function () { oImg.src=this.src; oImg.loaded=true;//添加自定义属性，只让onload事件触发一次； tempImg=null;//性能优化，将没用的元素删除； }; //加载失败 tempImg.onerror=function () { oImg.parentNode.style.backgroundImage='url("image/3.jpg")';//设置元素的非行间样式，用style，改变p元素的背景图； oImg.loaded=true; tempImg=null; } } </script> </body> </html>
7 多张图片的延迟加载实例
- 知识点：遍历多个图片元素，然后调用函数执行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多张图片的延迟加载</title> <style> body,html{ width: 100%; height: 200%; } div{ width: 200px; height: 200px; margin-bottom: 20px; background: url("image/5.jpg") center no-repeat #ffffff; background-size: 100% 100%; } div img{ width: 100%; height: 100%; } </style> </head> <body> <p style="height: 1000px;"></p> <div><img src="image/5.jpg" realImage="image/1.jpg" alt=""></div> <div><img src="image/5.jpg" realImage="image/2.jpg" alt=""></div> <div><img src="image/5.jpg" realImage="image/33.jpg" alt=""></div> <div><img src="image/5.jpg" realImage="image/4.jpg" alt=""></div> <script src="utils2.js"></script> <script> var aImg=document.getElementsByTagName("img"); window.onscroll=function () { for(var i=0; i<aImg.length; i++){ var scrollBot=utils.win("scrollTop")+utils.win("clientHeight"); var imgTop=utils.offset(aImg[i]).Top+aImg[i].offsetHeight+188; if(imgTop<scrollBot){ lazyLoad(aImg[i]); } } }; function lazyLoad(img) { if(img.loaded) return; var Imgfrg=document.createElement("img"); Imgfrg.src=img.getAttribute("realImage"); Imgfrg.onload=function () { img.src=this.src; Imgfrg=null; img.loaded=true; }; Imgfrg.onerror=function () { img.parentNode.style.backgroundImage='url(image/6.jpg)'; Imgfrg=null; img.loaded=true; }; } </script> </body> </html>
