收藏
天蓬老師批改狀態(tài)：合格
老師批語：這幾個(gè)案例, 很經(jīng)典, 基本覆蓋了常用的技巧 , 多練習(xí)
一、選項(xiàng)卡相關(guān)知識(shí)點(diǎn)：
1、document.querySeclertorAll();:返回NOdeList集合，可以直接使用NodeList.forEach(function(item,key,arr){});
2、addEventListener(‘事件行為字符串’,函數(shù),false);
3、彈窗：alert();
4、冒泡事件：事件從下往上觸發(fā)
委托事件：父級(jí)添加事件監(jiān)聽，判斷觸發(fā)事件的對(duì)象
5、ev.target:觸發(fā)事件的對(duì)象；ev.type:事件的行為
6、控制class的新對(duì)象：classListclassList.add();:為標(biāo)簽元素添加class的樣式值classList.remove():移除元素已有的class樣式classList.replace('foo','bar'):將類值 “foo” 替換成 “bar”;classList.contains('active'):檢索當(dāng)前類屬性中有無active屬性值；
7、自定義html標(biāo)簽的自定義屬性：data-index='1'
data:系統(tǒng)默認(rèn)的
index:用戶自定義的
二、懶加載相關(guān)知識(shí)點(diǎn)
1、元素的移動(dòng)偏量：offsetTop,offsetLeft
元素在頁面空間中的可見空間大?。簅ffsetWidth,offsetHeight;（包含內(nèi)邊距和boder）
2、元素客戶區(qū)大?。阂暣按笮。ò瑑?nèi)邊距）
clientHeight,clientWidth;
3、ev.target.srollTop:當(dāng)前事件對(duì)象的滾動(dòng)大?。?br/>4、判斷對(duì)象是否進(jìn)入可視區(qū)域，對(duì)象的偏移量是否小于可視區(qū)域和滾動(dòng)大小之和；
三、漸隱效果和輪播圖相關(guān)知識(shí)點(diǎn)
1、css中透明度屬性：opacity:0;
2、獲取對(duì)象的生成的樣式屬性對(duì)象集合：window.getComputedStyle();
3、parseInt():轉(zhuǎn)換為整數(shù)；
4、setInterval(function(){},1000)； 方法可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval(timer); 被調(diào)用或窗口被關(guān)閉；
5、document.createElement();創(chuàng)建元素；
6、自定義html標(biāo)簽的自定義屬性：data-index='1'
data:系統(tǒng)默認(rèn)的i
index:用戶自定義的
調(diào)用：setdata.index;
7、nextElementSibling：下一個(gè)元素；previousElmentSibling;上一個(gè)元素；
8、dispatchEvent() 方法給節(jié)點(diǎn)分派一個(gè)合成事件。
一、選項(xiàng)卡案例
1、代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>選項(xiàng)卡</title> <style> * { margin: 0; padding: 0; } .shows { margin:auto; width: 600px; height: 500px; background-color: red; } .shows>ul { margin: auto; width: 400px; height: 50px; background-color: bisque; display: flex; justify-content: space-around; /* text-align: center; */ } .shows>ul> .li { list-style: none; text-align: center; line-height: 50px; cursor:pointer; } .shows> ul > .act{ color:coral; } .shows > .img { width: 600px; height: 500px; } .shows > .imgs > .img { width: 600px; height: 450px; /* display: none; */ display: none; } .shows> .imgs >.active{ display:block; } </style></head><body> <div class="shows"> <ul> <li class="li act" data-index="1">圖片1</li> <li class="li" data-index="2">圖片2</li> <li class="li" data-index="3">圖片3</li> </ul> <div class="imgs"> <img src="images/1.jpg" alt="" class="img active" data-index="1"> <img src="images/2.jpg" alt="" class="img" data-index="2"> <img src="images/5.jpg" alt="" class="img" data-index="3"> </div> </div> <script> var ul=document.querySelector('ul'); uls=Array.from(ul.children); // console.log(ul); var imgs=document.querySelector('.imgs'); imgss=Array.from(imgs.children); // imgss.forEach(element => { // console.log(element); // }); // console.log(imgs); ul.addEventListener('click',showimg,false); function showimg(ev){ if(ev.target.nodeName==='LI'){ uls.forEach(function(tab){tab.classList.remove('act')}); ev.target.classList.add('act'); imgss.forEach(function(img){ // console.log(img); img.classList.remove('active') }); imgss.forEach(function(img){ if(img.dataset.index===ev.target.dataset.index){ img.classList.add('active'); } })} } </script></body></html>2、演示結(jié)果：
3、問題委托事件：委托父級(jí)式，在判斷事件行為是，空白處的行為會(huì)到結(jié)果造成干擾，所有對(duì)于觸發(fā)事件對(duì)象進(jìn)行判斷！免費(fèi)干擾！
二、懶加載
1、代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div> <img src="images/temp.jpg" alt="" data-src="images/1.jpg"> <img src="images/temp.jpg" alt="" data-src="images/2.jpg"> <img src="images/temp.jpg" alt="" data-src="images/3.jpg"> <img src="images/temp.jpg" alt="" data-src="images/4.jpg"> <img src="images/temp.jpg" alt="" data-src="images/5.jpg"> <img src="images/temp.jpg" alt="" data-src="images/6.jpg"> <img src="images/temp.jpg" alt="" data-src="images/7.jpg"> <img src="images/temp.jpg" alt="" data-src="images/8.jpg"> <img src="images/temp.jpg" alt="" data-src="images/9.jpg"> <img src="images/temp.jpg" alt="" data-src="images/10.jpg"> <img src="images/temp.jpg" alt="" data-src="images/11.jpg"> <img src="images/temp.jpg" alt="" data-src="images/12.jpg"> <img src="images/temp.jpg" alt="" data-src="images/13.jpg"> <img src="images/temp.jpg" alt="" data-src="images/14.jpg"> <img src="images/temp.jpg" alt="" data-src="images/15.jpg"> <img src="images/temp.jpg" alt="" data-src="images/16.jpg"> <img src="images/temp.jpg" alt="" data-src="images/17.jpg"> <img src="images/temp.jpg" alt="" data-src="images/18.jpg"> <img src="images/temp.jpg" alt="" data-src="images/19.jpg"> <img src="images/temp.jpg" alt="" data-src="images/20.jpg"> <img src="images/temp.jpg" alt="" data-src="images/21.jpg"> </div> <script> var imgs=document.querySelectorAll('img'); // console.log(imgs); var height=document.documentElement.clientHeight; // console.log(height); window.addEventListener('scroll',function(){ var scroll=document.documentElement.scrollTop; imgs.forEach(function(img){ // console.log(img); if(img.offsetTop<=(height+scroll)){ img.src=img.dataset.src; } }) },false); </script></body></html>2效果運(yùn)行圖：
三、漸隱效果
1、代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>漸隱效果</title> <style> .img{ width: 400px; height: 400px; opacity: 0.5; } </style></head><body> <img src="images/1.jpg" alt="" class="img"><br> <button>顯示</button> <button>隱藏</button> <script> var img=document.querySelector('img'); // console.log(img); var opacity=parseInt(window.getComputedStyle(img).opacity); var btu1=document.querySelectorAll('button').item(0); var btu2=document.querySelectorAll('button').item(1); btu1.addEventListener('click',fadeIn,false); btu2.addEventListener('click',fadeOut,false); function fadeIn(){ var timer=setInterval(function () { opacity+=0.05; img.style.opacity=opacity; if(opacity>=1){ clearInterval(timer); } },200) } function fadeOut(){ var timer=setInterval(function () { opacity-=0.05; img.style.opacity=opacity; if(opacity<=0){ clearInterval(timer); } },200) } </script> </body></html>2、運(yùn)行結(jié)果
四、輪播圖案例
1、代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin:0; padding:0; } .shows{ width: 1000px; height: 350px; margin: auto; position: relative; } .shows > div:nth-child(2){ position: absolute; top:40%; width: 1000px; height: 350px; display: flex; justify-content: space-between; } .skip{ display: inline-block; width: 40px; height:60px; background-color: rgba(253, 253, 253,0.3); text-align: center; line-height: 60px; font-size: 30px; font-style: 500; color:rgba(0,0,0,0.2); cursor: pointer; } .skip:hover{ background-color: rgba(253, 253, 253,0.6); } .shows > .banner > .img { width: 1000px; height: 350px; display:none; } .shows > .banner > .act{ display:block; } .shows > .points{ position:absolute; top:330px; left:45%; /* width: 200px; */ /* background-color: red; */ display: flex; } .shows > .points > .point{ display: inline-block; width: 12px; height: 12px; margin: 0 5px; background-color: white; border-radius: 100%; cursor: pointer; } .shows > .points > .active{ background-color: black; } </style></head><body> <div class="shows"> <div class="banner"> <img src="banner/banner1.jpg" class="img act" alt="" data-index="1"> <img src="banner/banner2.jpg" class="img" alt="" data-index="2"> <img src="banner/banner3.jpg" class="img" alt="" data-index="3"> <img src="banner/banner4.jpg" class="img" alt="" data-index="4"> </div> <div> <span class="skip prev" ><</span> <span class="skip next">></span> </div> <div class="points"> <!-- 小圓點(diǎn)位置 --> </div> </div> <script> var imgs=document.querySelectorAll('img'); var points=document.querySelector('.points'); imgs.forEach(function(img,index){ var span=document.createElement('span'); if(index===0){ span.classList.add('point', 'active'); }else{ span.classList.add('point'); } span.dataset.index=img.dataset.index; points.appendChild(span); }); points=document.querySelectorAll('.point'); Array.from(points).forEach(function(point){ point.addEventListener('click',function(ev){ // console.log(ev); imgs.forEach(function(img){ if(img.dataset.index===ev.target.dataset.index){ imgs.forEach(function(img){ img.classList.remove('act'); }); img.classList.add('act'); pointBlcak(img.dataset.index); } }); },false); }) function pointBlcak(img){ points.forEach(function(point){ point.classList.remove('active'); }); points.forEach(function(point){ if(point.dataset.index===img){ point.classList.add('active'); } }); } var skip=document.querySelectorAll('.skip'); skip.item(0).addEventListener('click',skipimg,false); skip.item(1).addEventListener('click',skipimg,false); function skipimg(ev){ var currentimg=null; // console.log(imgs); imgs.forEach(function(img){ if(img.classList.contains('act')){ currentimg=img; } }) // console.log(ev.target); if(ev.target.classList.contains('prev')){ currentimg.classList.remove('act'); currentimg=currentimg.previousElementSibling; // console.log(currentimg); if(currentimg!==null && currentimg.nodeName==="IMG"){ currentimg.classList.add('act'); }else{ currentimg=imgs[imgs.length-1]; currentimg.classList.add('act'); } } if(ev.target.classList.contains('next')){ currentimg.classList.remove('act'); currentimg=currentimg.nextElementSibling; // console.log(currentimg); if(currentimg!==null && currentimg.nodeName==="IMG"){ currentimg.classList.add('act'); }else{ currentimg=imgs[0]; currentimg.classList.add('act'); } } pointBlcak(currentimg.dataset.index); } var shows=document.querySelector('.shows'); var timer=null; shows.addEventListener('mouseover',function(){ clearInterval(timer); },false); shows.addEventListener('mouseout',function(){ var clickEvent=new Event('click'); timer=setInterval(function(){ skip.item(0).dispatchEvent(clickEvent); },1500); },false); </script></body></html>2、運(yùn)行結(jié)果圖：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)