bilibili导航实现 话说今天实验课,一如既往的打开阿b准备学（shua）习(fan)，突然发现阿b首页导航还挺好看，恰巧最近在复习原生js，就顺带在实验课上实现了这个效果。（因为想到哪写哪，啥都没封装，代码可能比较乱，见谅见谅）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>banner</title> <style> .back{ position: fixed; width: 100%; height: 50px; top: 0; left: 0; } .back-tran{ transition: transform 0.5s; } .img{ transition: filter 0.5s; } #bc6{ transform: translate(-50px,0); } #bc4{ transform: translate(40px,0); } #bc3{ transform: translate(50px,0); } #bc2{ transform: translate(-20px,0); } *{ margin: 0; padding: 0; } </style> </head> <body> <div id="root"> <div id="bc1" class="back"> <img id="img1" style="filter:blur(2px); width: 100%; height: 100%;" src="img/test1.png" /> </div> <div id="bc2" class="back"> <img id="img2" style="width: 100%; height: 100%;" src="img/test2.png" /> </div> <div id="bc3" class="back"> <img id="img3" style="filter: blur(1px); width: 100%; height: 100%;" src="img/test3.png" /> </div> <div id="bc4" class="back"> <img id="img4" style=" filter:blur(1px); width: 100%; height: 100%;" src="img/test4.png" /> </div> <div id="bc5" class="back"> <img id="img5" style="filter:blur(3px); width: 100%; height: 100%;" src="img/test5.png" /> </div> <div id="bc6" class="back"> <img id="img6" style="filter:blur(3px); width: 100%; height: 100%; " src="img/test6.png" /> </div> </div> <script> var root = document.querySelector("#root"); var x = 0; var that = this; root.addEventListener('mouseenter',(event)=>{ that.x = event.screenX }) root.addEventListener('mouseleave',(event)=>{ var bc6 = document.querySelector("#bc6"); bc6.style.transform = `translate(-50px,0)` var img6 = document.querySelector("#img6"); img6.style.filter = `blur(3px)` bc6.classList.add('back-tran') img6.classList.add('img') var bc5 = document.querySelector("#bc5"); bc5.style.transform = `translate(0px,0)` var img5 = document.querySelector("#img5"); img5.style.filter = `blur(3px)` bc5.classList.add('back-tran') img5.classList.add('img') var bc4 = document.querySelector("#bc4"); bc4.style.transform = `translate(40px,0)` var img4 = document.querySelector("#img4"); img4.style.filter = `blur(1px)` bc4.classList.add('back-tran') img4.classList.add('img') var bc3 = document.querySelector("#bc3"); bc3.style.transform = `translate(50px,0)` var img3 = document.querySelector("#img3"); img3.style.filter = `blur(1px)` bc3.classList.add('back-tran') img3.classList.add('img') var img2 = document.querySelector("#img2"); img2.style.filter = `blur(0px)` img2.classList.add('img') }) root.addEventListener('mousemove',(event)=>{ console.log(event) var bc6 = document.querySelector("#bc6"); bc6.style.transform = `translate(${((event.screenX - that.x)/60)-50}px,0)` var img6 = document.querySelector("#img6"); img6.style.filter = `blur(${ (3 - ((event.screenX - that.x)/400)) < 3 ? (3 - ((event.screenX - that.x)/400)) : 3 }px)` bc6.className = 'back' img6.className = '' var bc5 = document.querySelector("#bc5"); bc5.style.transform = `translate(${((event.screenX - that.x)/60)}px,0)` var img5 = document.querySelector("#img5"); var blur5 = Math.abs((3 - ((event.screenX - that.x)/450)) < 3 ? (3 - ((event.screenX - that.x)/450)) : 3) img5.style.filter = `blur(${blur5}px)` bc5.className = 'back' img5.className = '' var bc4 = document.querySelector("#bc4"); bc4.style.transform = `translate(${((event.screenX - that.x)/240) + 40}px,0)` var img4 = document.querySelector("#img4"); var blur4 = Math.abs(1 - ((event.screenX - that.x)/900)); console.log(blur4) img4.style.filter = `blur(${blur4}px)` bc4.className = 'back' img4.className = '' var bc3 = document.querySelector("#bc3"); bc3.style.transform = `translate(${((event.screenX - that.x)/350) + 50}px,0)` var img3 = document.querySelector("#img3"); var blur3 = Math.abs(1 - ((event.screenX - that.x)/900)); console.log(blur3) img3.style.filter = `blur(${blur3}px)` bc3.className = 'back' img3.className = '' var img2 = document.querySelector("#img2"); var blur2 = Math.abs(((event.screenX - that.x)/500)); console.log(blur2) img2.style.filter = `blur(${blur2}px)` img2.className = '' }); </script> </body> </html>链接：https://pan.baidu.com/s/1UPprR-qgTH_9KtY0BEC6Ng 提取码：cnnc 这是图片链接
