Vue复刻华为官网
Posted 游坦之
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue复刻华为官网相关的知识，希望对你有一定的参考价值。
文章目录
1 推荐信息
1.1 思路
看了这个gif后，可以清楚的看到产生了三个动画效果：图片"拉近"，"了解更多"从下往上显示出来，阴影。
我看了华为官网的源代码，发现图片本身就是有一个mask的，这样能让图片看起来暗一些，也就意味着，当鼠标进入的时候，只需要让mask的背景颜色更深一些，就实现了阴影的效果。至于图片"拉近"，我早就写过了，无非是把图片放大，然后超出盒子的不显示，这个也容易。但了解更多显现，难度就大了一些。我想了很久，最后只有通过位置，来把"了解更多"显示出来，想过用visibility: visible;但效果不太好，也想过用Vue的过渡效果，但是好像又不能同时产生三个效果。所以笨人先用笨法，先能实现再说。
1.2 代码
<div class="div_container">
<div class="div_title">
<h2 class="title_h2">推荐信息</h2>
</div>
<div class="container_imgs">
<div class="div_row1">
<div class="row1_col1">
<a href="" class="col1_a1" @mouseenter="showDiv1(1)" @mouseleave="hideDiv1(1)">
<div class="a_div1">
<div class="mask"></div>
<img src="@/assets/matebook-x-pro2.jpg" alt="" class="a1_img1">
</div>
<div class="a_div2">
<div class="div2_title">
产品
</div>
<div class="div2_info">
HUAWEI MateBook X Pro
</div>
<div class="div2_info2">
入目惊鸿
</div>
<div class="div2_hidden">
了解更多
</div>
</div>
</a>
</div>
<div class="row1_col2" @mouseenter="showDiv1(2)" @mouseleave="hideDiv1(2)">
<a href="" class="col1_a1">
<div class="a_div1">
<div class="mask"></div>
<img src="@/assets/2.jpg" alt="" class="a1_img1">
</div>
<div class="a_div2">
<div class="div2_title">
产品
</div>
<div class="div2_info">
HUAWEI MateBook X Pro
</div>
<div class="div2_info2">
入目惊鸿
</div>
<div class="div2_hidden">
了解更多
</div>
</div>
</a>
</div>
</div>
<div class="div_row1">
<div class="row1_col2 " @mouseenter="showDiv1(3)" @mouseleave="hideDiv1(3)">
<a href="" class="col1_a1">
<div class="a_div1">
<div class="mask"></div>
<img src="@/assets/3.jpg" alt="" class="a1_img1">
</div>
<div class="a_div2">
<div class="div2_title">
产品
</div>
<div class="div2_info">
HUAWEI MateBook X Pro
</div>
<div class="div2_info2">
入目惊鸿
</div>
<div class="div2_hidden">
了解更多
</div>
</div>
</a>
</div>
<div class="row1_col3" @mouseenter="showDiv1(4)" @mouseleave="hideDiv1(4)">
<a href="" class="col1_a1">
<div class="a_div1">
<div class="mask"></div>
<img src="@/assets/4.jpg" alt="" class="a1_img1">
</div>
<div class="a_div2">
<div class="div2_title">
产品
</div>
<div class="div2_info">
HUAWEI MateBook X Pro
</div>
<div class="div2_info2">
入目惊鸿
</div>
<div class="div2_hidden">
了解更多
</div>
</div>
</a>
</div>
</div>
<div class="div_row3">
<div class="row1_col2 " @mouseenter="showDiv1(5)" @mouseleave="hideDiv1(5)">
<a href="" class="col1_a1">
<div class="a_div1">
<div class="mask"></div>
<img src="@/assets/5.jpg" alt="" class="a1_img1">
</div>
<div class="a_div2">
<div class="div2_title">
产品
</div>
<div class="div2_info">
HUAWEI MateBook X Pro
</div>
<div class="div2_info2">
入目惊鸿
</div>
<div class="div2_hidden">
了解更多
</div>
</div>
</a>
</div>
<div class="row1_col2 col2_displacement" @mouseenter="showDiv1(6)" @mouseleave="hideDiv1(6)">
<a href="" class="col1_a1">
<div class="a_div1">
<div class="mask"></div>
<img src="@/assets/6.jpg" alt="" class="a1_img1">
</div>
<div class="a_div2">
<div class="div2_title">
产品
</div>
<div class="div2_info">
HUAWEI MateBook X Pro
</div>
<div class="div2_info2">
入目惊鸿
</div>
<div class="div2_hidden">
了解更多
</div>
</div>
</a>
</div>
<div class="row1_col2 col2_displacement" @mouseenter="showDiv1(7)" @mouseleave="hideDiv1(7)">
<a href="" class="col1_a1">
<div class="a_div1">
<div class="mask"></div>
<img src="@/assets/7.jpg" alt="" class="a1_img1">
</div>
<div class="a_div2">
<div class="div2_title">
产品
</div>
<div class="div2_info">
HUAWEI MateBook X Pro
</div>
<div class="div2_info2">
入目惊鸿
</div>
<div class="div2_hidden">
了解更多
</div>
</div>
</a>
</div>
</div>
</div>
</div>
这里需要提一下，由于需要操作的是多个div，我用了根据类名操作Dom的方式，所以需要传一下是第几个Dom
methods:
showDiv1(value)
var d1 = document.getElementsByClassName('a_div2')[value - 1];
// alert("悬浮上来了")
d1.style.cssText = 'animation-name:example; animation-duration:0.5s;animation-fill-mode: forwards;z-index:3;'
var d3 = document.getElementsByClassName('a1_img1')[value - 1];
d3.style.cssText = 'animation-name:showBigImg2; animation-duration:0.5s;animation-fill-mode: forwards; '
var d2 = document.getElementsByClassName('mask')[value - 1];
d2.style.cssText = ' z-index:2; background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 70%);'
,
hideDiv1(value)
var d1 = document.getElementsByClassName('a_div2')[value - 1];
d1.style.cssText = ' animation-name:backwards; animation-duration:0.5s;animation-fill-mode: forwards;z-index:3;';
var d3 = document.getElementsByClassName('a1_img1')[value - 1];
d3.style.cssText = 'animation-name:cancelBigImg2; animation-duration:0.5s;animation-fill-mode: forwards; '
var d2 = document.getElementsByClassName('mask')[value - 1];
d2.style.cssText = 'background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 70%);z-index:2;'
// d1.style.cssText = ' animation-name:backwards; animation-duration:0.5s;animation-fill-mode: forwards;';
要记得设置一下mask的z-index级别（比图片大即可），不然在图片放大的过程中，mask会被遮挡住，这样就实现不了阴影的效果，而且很突兀。
.div_container
width: 85.652%;
/* border: 1px solid; */
margin: 0 auto;
text-align: center;
.div_title
width: 100%;
height: 100%;
margin-bottom: 5%;
.title_h2
width: 10%;
height: 90%;
padding-bottom: 8px;
font-size: 30px;
margin: 0 auto;
position: relative;
.title_h2::after
position: absolute;
content: '';
height: 2px;
width: 47%;
top: 100%;
left: 27%;
background-color: #c7000b;
.container_imgs
height: auto;
width: 100%;
.div_row1
height: auto;
width: 100%;
display: flex;
margin-bottom: 30px !important;
overflow: hidden;
.div_row3
height: auto;
width: 100%;
display: flex;
margin-bottom: 30px !important;
.row1_col1
width: 836.98px;
height: auto;
position: relative;
margin-right: 30px;
z-index: 3;
.row1_col3
width: 836.98px;
height: auto;
position: relative;
margin-left: 30px;
z-index: 3;
.col1_a1
width: 100%;
height: auto;
.a1_img1
width: 100%;
height: 100%;
.a_div1
width: 100%;
height: 100%;
overflow: hidden;
.mask
position: absolute;
top: 30%;
width: 100%;
height: 70%;
opacity: 1;
background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 70%);
.row1_col2
width: 403.24px;
height: auto;
position: relative;
overflow: hidden;
z-index: 3;
/* border: 2px solid sienna; */
.col2_displacement
margin-left: 30px;
/* 从-30px到10px */
.a_div2
width: 90%;
height: auto;
padding: 0% 5%;
bottom: -30px;
position: absolute;
display: inline-block;
left: 0px;
/* border: 1px solid purple; */
text-align: left;
.div2_title
font-size: 1em;
line-height: 1.0em;
margin-bottom: 10px;
color: white;
.div2_info
font-size: 1.3em;
line-height: 1.4em;
font-weight: 600;
margin-bottom: 10px;
color: white;
.div2_info2
font-size: 1em;
line-height: 1.0em;
margin-bottom: 20px;
color: rgb(198, 199, 199);
.div2_hidden
color: white;
height: 20px;
line-height: 20px;
visibility: visible;
margin-bottom: 10px;
1.3 知识补充
在写这个效果的时候，我遇到了一个很大的问题，就是鼠标一旦离开这个框（如下）的位置，动画效果就会被取消。我尝试了各种方法都无济于事。起初我以为是子组件遮挡住了父组件导致，所以一度往如何让子组件彻底变成父组件的一部分上思考。但后来搜索Vue中的鼠标事件的时候，得到了解决。
原因是因为最开始我用了mouseout鼠标事件，而mouseout事件一旦离开父元素或者子元素都会触发，所以鼠标离开子元素的时候，也会触发父元素上的mouseout鼠标事件，但是mouseleave则不同，只有离开被选元素的时候，才会触发效果，这样遇到的问题就被完美解决了。
1.4 效果图
2 宣传海报
2.1 思路
这个实现起来很容易，"了解更多"按钮和父组件分别使用position:absolute , position:relative，然后"了解更多"按钮相对于父组件定位，利用top和left(或者bottom、right)定位，将其放置在合适的位置。
至于"了解更多"的悬浮效果，则通过:hover即可实现
2.2 代码
<div class="div_bill">
<img src="@/assets/sanwenyu.jpg" class="bill_img">
<button class="img_btn">了解更多</buttonVue复刻华为官网