bilibili网页图片动态效果实现

前一段时间在b站刷视频的时候看到了一个关于如何实现bilibili顶部导航的动画效果的视频。在看到这个视频之前，我也挺喜欢bilibili导航的动画效果，心里默默赞叹（b站nb）。由于刚自学不久，学习时间也较忙所以一直没有尝试去实现这个效果。所以当我看到这个视频的时候，我就决定要跟着视频里的思路搞明白这效果是怎么实现。
提示：代码里有ES6的语法，刚开始看代码时我也很懵，去补了一下ES6语法的相关内容才知道那些箭头函数等相关的知识。

要实现的内容

实现一个多图层组合的静态界面
实现不同图层不同清晰度的配置
实现鼠标左右移动导致的清晰度变化
实现鼠标左右移动导致的跟随位移
实现小女孩的眨眼效果
实现鼠标离开时整个效果的还原

。

提示：以下是完整的代码，有比较详细的备注说明，实现的原理也比较简单。设置图片初始位置，添加鼠标移动事件，事件处理等。搜索输入框用的是bootstrap

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="bilibili.css"><link rel="stylesheet" href="bootstrap.min.css"><style></style>
</head>
<body><div id="math"><div class="image"><img width="3000" height="250" src="data:images/bg.png"></div><div class="image"><img width="1800" height="160" src="data:images/girl1.png"></div><div class="image"><img width="3000" height="250" src="data:images/grassland.png"></div><div class="image"><img width="1800" height="160" src="data:images/leaf.png"></div><div class="image"><img width="1800" height="165" src="data:images/mushroom.png"></div><div class="image"><img width="1950" height="178" src="data:images/spirit.png"></div><div class="daohan"><div class="head" style="width: 450px;"><span class="spana"><a>主站</a></span><span class="spana"><a>番剧</a></span>   <span class="spana"><a>游戏中心</a></span><span class="spana"><a>直播</a></span><span class="spana"><a>会员购</a></span><span class="spana"><a>漫画</a></span> <span class="spana"><a>赛事</a></span>                   </div><div class="row" style="width:500px;"><div class="col-lg-6" style="width: 500px;"><div class="input-group"><input type="text" class="form-control" placeholder="Search for..."><span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span></div><!-- /input-group --></div><!-- /.col-lg-6 --></div><!-- /.row --><div class="dl"><div class="right"><span class="touxian"></span><span><a>登录</a></span><span><a>注册</a></span><button class="tg">投稿</button></div></div></div></div><script>var math=document.getElementById("math");var image=document.getElementsByTagName("img");//选择器，匹配选择器的所有元素var window_width=document.documentElement.clientWidth;//获取整个窗口的宽度var change=window_width/2/5;//获取鼠标移动2份1屏幕宽度，模糊度发生5px变化的值是多少console.log(change);var data_image=[{x:0,b:4},{x:0,b:0},{x:0,b:1},{x:0,b:4},{x:0,b:5},{x:0,b:6},]function vague(){//image[0].style='transform:translate(0px);filter:blur(4px);'; 使不同图片模糊。换用for实现//image[1].style='transform:translate(0px);filter:blur(0px);';//image[2].style='transform:translate(0px);filter:blur(1px);';//image[3].style='transform:translate(0px);filter:blur(4px);';//image[4].style='transform:translate(0px);filter:blur(5px);';//image[5].style='transform:translate(0px);filter:blur(4px);';for(var i in image){if(image.hasOwnProperty(i)){var imagearry=image[i];var data=data_image[i];imagearry.style='transition: 0.5s linear; transform:translate('+data.x+'px);filter:blur('+data.b+'px);'; //熟记('+data.x+'px)格式。}}}var x=0;//x坐标本来的位置var x_new=0;//x坐标新的位置var x_x=0;//新坐标和原来坐标的差值math.onmouseover=function(e){  //设置一个值接收鼠标初始位置的值x=e.clientX;//console.log(x);}math.onmousemove=function(e){  //设置一个值接收鼠标移动位置的值，鼠标移动时执行效果x_new=e.clientX;//console.log(x_new);x_x=x-x_new;//console.log(x_x);for(var i in image){if(image.hasOwnProperty(i)){var mover_new=(6-parseInt(i))*10;var imagearry=image[i];var data=data_image[i];var new_b=Math.abs(data.b+(x_x/change));var new_data=x_x/mover_new;imagearry.style='transform:translate('+new_data+'px);filter:blur('+new_b+'px);'; //熟记('+data.x+'px)格式。}}}math.onmouseout=function(e){//鼠标移出恢复初始化vague();}var eye=1;timeout=4000;function eye_e(){if(eye==4){eye=1;timeout=4000;}else{eye+=1; timeout=35;}image[1].src='images/girl'+eye+'.png';setTimeout(()=>{eye_e();},timeout);}window.onload=function(){vague();eye_e();}</script>
</body>
</html>

css代码

*{ margin: 0;padding: 0;} /*初始化*/
#math{position: relative;width: 100%;height: 155px;overflow: hidden;background-color: aquamarine;
}.image{position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}
.touxian{width:40px;height:40px;border-radius:20px;background: url(images/kkk.jpg);background-size:40px 40px;display: inline-block;
}
.tg{border: none;background-color: #FB7299;width: 100px;height: 40px;border-radius:6px;color: white;
}
.right span{display: inline-block;margin-right: 10px;
}
.right{margin-top: 10px;width: 100%;display: flex;justify-content: space-between;
}
.right span a{line-height: 40px;color: white;
}
div .spana a{color: rgb(19, 123, 241);font-size: 16px;margin-right: 10px;
}
div.row{margin-right: 10px;display: inline-block;
}
div.head{display: inline-block;margin-left: 30px;z-index: 100;
}
div.head a{color: white;
}
div.dl{z-index: 100;display: inline-block;margin-right: 30px;
}
div.daohan{width: 100%;height: 40px;display: inline-flex;justify-content: space-between;align-items: center;z-index: 100;
}
div.math{float: inline-start;
}

效果图

总结

以上就是文章的主要内容，本文仅仅简单写了bilibili导航效果的实现。也算是我前端三件套的基础学习告一段落了。目前在学Vue，希望自己能坚持下去，万事顺利，谢谢谢谢谢谢。

bilibili网页图片动态效果实现相关推荐

frontpage中没有动态HTML效果,FrontPage制作网页的动态效果(上)
在网页的页面中添加一定的动态效果会给网页增加许多的色彩.现在网页的动态效果制作的方法很多,有些需要你学习一些相关的语言.FrontPage是网页制作工具中的一个多功能的工具,它为我们提供了全中文的界面 ...
网页图片实现百叶窗效果
网页图片实现百叶窗效果制作或者观看过幻灯片的网友,一定不会对幻灯片的切换效果感到陌生,垂直百叶窗式.纵向棋盘式等切换效果是否让你还记忆犹新呢?其实我们也可以把网页中的图片做出这种效果. 预想效果: ...
HTML5与jQuery实现渐变绚丽网页图片效果
HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果.在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像 ...
python3多线程第三方库_Python之多线程爬虫抓取网页图片的示例代码
目标嗯,我们知道搜索或浏览网站时会有很多精美.漂亮的图片. 我们下载的时候,得鼠标一个个下载,而且还翻页. 那么,有没有一种方法,可以使用非人工方式自动识别并下载图片.美美哒. 那么请使用pytho ...
java爬虫-简单爬取网页图片
刚刚接触到"爬虫"这个词的时候是在大一,那时候什么都不明白,但知道了百度.谷歌他们的搜索引擎就是个爬虫. 现在大二.再次燃起对爬虫的热爱,查阅资料,知道常用java.python语 ...
网络计算机不显示不出来,网页图片显示不出来怎么办网络故障解决【详解】...
网页图片显示不出来怎么办? 文字与图片是构成一个网页的两个最基本的元素.你可以简单地理解为:文字,就是网页的内容.图片,就是网页的美观.除此之外,网页的元素还包括动画.音乐.程序等等. 有时候我们浏览 ...
android图片浏览功能,怎么在Android应用中实现一个网页图片浏览功能
怎么在Android应用中实现一个网页图片浏览功能发布时间:2020-12-05 17:28:31 来源:亿速云阅读:80 作者:Leah 本篇文章给大家分享的是有关怎么在Android应用中实现 ...
python抓取贴吧_python抓取百度贴吧-校花吧，网页图片
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 #!/usr/bin/python3 #code=utf-8 import urllib.request import re path = "C ...
html插入图片出现红叉,网页图片显示红色叉怎么回事网页图片有些不显示的有效解决方法...
浏览各种网页是很多小伙伴们的日常,所以很多的网页知识都大概知道,当然也会遇到一些网页上的问题,比如说在浏览网页时图片全部不显示并且有红叉,相信大多数的朋友都会瞬间关闭然后打开另外一个页面,如果这张图片 ...

bilibili网页图片动态效果实现

bilibili网页图片动态效果实现

要实现的内容

代码如下

总结

bilibili网页图片动态效果实现相关推荐

最新文章

热门文章