哔哩哔哩导航背景写法

个人对bilibili很感兴趣，也是平时学习和摸鱼的好地方

而且哔站的导航也做的很好玩，

如图（动图太大上传不了，效果就是背景图片跟随鼠标来移动）

然er自己想着白嫖一下代码，结果把度娘打到吐血她也不肯给我看源码（好像还没人闲的没事写这个东东…）

哔哩哔哩，点击这里

然后自己就琢磨了一下，大概模仿了一下

开始喽 ↓↓↓

（ - - - 完整代码在最下面 - - - ）

首先去b站扣需要的素材

然后简单的写一个盒子

<template>
  <div class="home">
  	/* 这里要加一个遮罩层，也就是覆盖在内容盒子上面的一个盒子，具体原因后面会说 */
  	<div class="mask"></div>
    <div class="nav">
      <div class="nav_item">
        <img src="../assets/1.png" class="img1">
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
body {
    
  margin: 0;
  padding: 0;
  .mask {
    
    width: 100%;
    height: 175px;
    position: absolute;
    top: 0;
    z-index: 39;
    /* background: rgba(147,258,369,0.5); */
  }
  .nav {
    
    height: 175px;
    overflow: hidden;
    .nav_item {
    
      height: 100%;
      position: relative;
      overflow: hidden;
      img {
    
      	/* 根据图片的实际大小来调整页面上的大小 */
        height: 200px;
        /* 定位是要图片根据鼠标移动而移动时要用的，自己有点菜，不知道js怎么用transfrom */
        position: absolute;
        bottom: 0;
        /* 根据图片的实际大小来调整页面上的位置（主要是想着跟人家一样） */
        transform: translateX(-200px);
      }
    }
  }
}
</style>

然后大概的样子就是这样

然后就要给他添加mousemove鼠标移动事件，跟随鼠标来移动（这里有个坑），这时候你肯定想只接在.nav的盒子上面写，但是当鼠标滑过图片时，在.nav盒子上的鼠标事件就会中断，所以在外层加了一个盒子来做遮罩层，所有的事件都放到遮罩层上面来进行↓↓↓

<template>
  <div class="home">
  /* 这里要加一个遮罩层，也就是覆盖在内容盒子上面的一个盒子，具体原因后面会说 */
  	/*这里也要加一个out，鼠标离开事件，让跟随鼠标移动的元素，在鼠标离开时复原*/
  	/*over事件是来获取鼠标最开始悬浮到盒子上时的坐标，用来计算盒子内图片跟随鼠标移动的距离*/
  <div class="mask" @mousemove="move" @mouseout="out" @mouseover="over"></div>
    <div class="nav">
      <div class="nav_item">
        <img src="../assets/1.png" class="img1">
      </div>
    </div>
  </div>
</template>
<script>
export default {
    
	methods: {
    
		move(data) {
    
			/*获取图片*/
      		this.img1 = document.getElementsByClassName('img1')
      		/*改变图片绝对定位状态下的left*/
      		/*用盒子距离左边的值 减去 鼠标悬浮到盒子那一刻的 x轴的值 等于 盒子要跟随鼠标移动的值*/
      		/*除以1.2  是因为值太大，移动太快，具体根据b站来调整*/
      		/*改成负数，是因为图片是跟鼠标相反的方向移动的*/
      		this.img1[0].style.left = -(data.screenX - this.overData)/1.2 + 'px'

			/*跟随鼠标移动时，把过度时间调为0，要不感觉有延迟*/
    		this.img1[0].style.transition = 0 + 's'
    	},
		out() {
    
			/*鼠标离开后，让图片回到原来的位置，这时候要加上过度时间，否则就唰~的一下直接回去了，不好看*/
        	this.img[1].style.left = 0 + 'px'
        	this.img[1].style.transition = 0.2 + 's'
    	},
    	over(data) {
    
    		/*获取鼠标悬浮到盒子那一刻的x轴坐标，用来计算*/
      		this.overData = data.x
    	}
	}
	
}
</script>

至此，一张图片跟随鼠标移动就完成了，然后，大致内容就是添加新的图片，然后Ctrl+C/V了，大概就是这样↓↓

<template>
  <div class="home">
    <div class="mask" @mousemove="move" @mouseout="out" @mouseover="over"></div>
    <div class="nav">
      <!-- 大背景--最后面/最远处 -->
      <div class="nav_item">
        <img src="../assets/bg.png" class="img0 imgAll">
      </div>
      <!-- 主图---两个人坐在树下 -->
      <div class="nav_item">
        <img src="../assets/1.png" class="img1 imgAll">
      </div>
      <!-- 左边的桥 -->
      <div class="nav_item">
        <img src="../assets/2.png" class="img2 imgAll">
      </div>
      <!-- 主图后方--滑到最右边 带樱花树的 过度图 -->
      <div class="nav_item">
        <img src="../assets/3.png" class="img3 imgAll">
      </div>
      <!-- 左边大樱花树--近景 -->
      <div class="nav_item">
        <img src="../assets/bigTree.png" class="img4 imgAll">
      </div>
      <!-- 右边大柳枝--近景 -->
      <div class="nav_item">
        <img src="../assets/willow.png" class="img5 imgAll">
      </div>
	</div>
</template>
<script>
export default {
    
  methods: {
    
    move(data) {
    
      this.img = document.getElementsByClassName('imgAll')

      this.img0 = document.getElementsByClassName('img0')
      this.img0[0].style.left = -(data.screenX - this.overData)/20 + 'px'
      this.img0[0].style.transition = 0 + 's'

      this.img1 = document.getElementsByClassName('img1')
      this.img1[0].style.left = -(data.screenX - this.overData)/1.2 + 'px'
      this.img1[0].style.transition = 0 + 's'

      this.img2 = document.getElementsByClassName('img2')
      this.img2[0].style.left = -(data.screenX - this.overData)/3.3 + 'px'
      this.img2[0].style.transition = 0 + 's'

      this.img3 = document.getElementsByClassName('img3')
      this.img3[0].style.left = -(data.screenX - this.overData)/2.5 + 'px'
      this.img3[