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://www.uj5u.com/ruanti/188073.html
標籤：其他
上一篇：2020-10-21
下一篇：騰訊云雙十一活動分析