Vue中实现鼠标悬浮完成图片替换

最近在做一个小项目，要实现的功能是在一个六边形中，实现一个鼠标悬浮不同的区域该区域的颜色和背景均发生改变，且点击对应区域并能完成链接跳转，跳转到不同的页面。闲话少说，具体实现如下。

1.需求

具体需求如上图所示，即对应的6个小六边形均是有动态效果的，当鼠标悬浮上去时，会出现右下角的效果。当点击该写有信息采集麻烦的小六边形时，会进行跳转到指定页面。刚开始接到这个需求时，我的反应是利用canvas绘制一个这样的图形，然后再写一部分函数来监听不同区域的鼠标事件，这样可以实现，但是操作难度也会不小，于是想找一些简单的方法来实现效果。未能直接采用这个效果还有一个重要原因，就是在监听不同区域的函数设计上会花费大量时间。在进行多次探索以后，我决定试一下利用障眼法形式（个人定义）来进行尝试一下。

2.分析与实现

1.首先我将该图片分成了七个不同的小图片，按照三层div的形式来划分并让美工进行切图。图片划分的形式如下：
这样划分的目的是为了保证我能够最大程度拼凑成初始需求的样式，当图片切好以后，这里强调一下，6个小六边形的大小一定要一样，这是为了在布局时不会发生偏移情况，能够保证在布局时能够达到初始需求的标准。
2.接下来进行布局，正如我上述强调的一样。这里的七个图片可以按照三层布局的形式，设置3个div，然后将对应的图片引入，然后进行一些样式的控制以达到效果。具体代码如下：

<div class="col-md-12" :style="backgroundIndex"><!--<img src="/static/img/indexBackground.png"/>--><div style="padding-top: 100px"><img :src="indexCenter1" style="padding-right: 180px"/><img :src="indexCenter2"/></div><div><img :src="indexCenter3"/><img src="/static/img/indexCenter.png"><img :src="indexCenter4" /></div><div style="padding-bottom: 100px"><img :src="indexCenter5" style="padding-right: 180px"/><img :src="indexCenter6"/></div></div>

这里的img的src必须以动态绑定形式，因为我们在鼠标悬浮时需要触发事件，更改图片路径，以实现鼠标悬浮时，达到悬浮后出现动态效果。这样布局完成后，基本上就已经实现了刚开始的样子。效果图如下：

3.接下来要实现的是鼠标滑到对应的小六边形出现不同的动画效果，于是便让美工切了6张悬浮后的效果图，大概的样式如下：

这里以最后一张为例，然后开始实现效果，添加鼠标移入移出的事件，来完成具体的效果。代码如下：

<div class="col-md-12" :style="backgroundIndex"><!--<img src="/static/img/indexBackground.png"/>--><div style="padding-top: 100px"><img :src="indexCenter1" style="padding-right: 180px" @mouseover="changeIndex(1)" @mouseout="changeIndexBack(1)"/><img :src="indexCenter2" @mouseover="changeIndex(2)" @mouseout="changeIndexBack(2)"/></div><div><img :src="indexCenter3" @mouseover="changeIndex(3)" @mouseout="changeIndexBack(3)"/><img src="/static/img/indexCenter.png"><img :src="indexCenter4" @mouseover="changeIndex(4)" @mouseout="changeIndexBack(4)"/></div><div style="padding-bottom: 100px"><img :src="indexCenter5" style="padding-right: 180px" @mouseover="changeIndex(5)" @mouseout="changeIndexBack(5)"/><img :src="indexCenter6" @mouseover="changeIndex(6)" @mouseout="changeIndexBack(6)"/></div></div>

鼠标移动移出均添加了函数事件，即滑动都会触发对应函数，通过调用不同函数来实现src更改，从而实现动画效果。对应函数如下：

  export default{data(){indexCenter1:'/static/img/indexCenter11.png',indexCenter11:'/static/img/indexCenter11.png',indexCenter111:'/static/img/indexCenter1.png',
}
}

这里图片路径设置也要注意，indexCenter11.png是鼠标悬浮后的效果图片，不要搞错了，indexCenter1.png是未悬浮时的初始样式图片。这里为什么要设置两个路径相同但名称不同的变量，这是为了后面路径切换做准备。待我展示完函数时具体讲解。changeIndex函数如下：

 changeIndex(index){switch(index){case 1:this.indexCenter1 = this.indexCenter11;break;}},

鼠标移除后的changeIndexBack函数如下：

 changeIndexBack(index){switch(index){case 1:this.indexCenter1 = this.indexCenter111;break;}},

这里讲解一下原理，当鼠标移入对应图片时，首先会将indexCenter11的变量路径赋给indexCenter1，其实图片路径并未改变，当鼠标移出时，才是正式发生改变的时候，这时会将indexCenter111的变量路径赋给indexCenter1，即将初始样式图片样式赋给了效果图片，完成状态切换。这里这样赋值其实还有一个问题，就是我们一开始打开页面看到的全是悬浮后的效果图片，而且悬浮一次后才能恢复到初始样式，这根我们的路径赋值有关。在这里我们只需要让它在页面加载时就先将初始样式图片样式赋给了效果图片，即页面一开始就执行changeIndexBack函数就可。具体代码如下：

mounted(){this.changeIndexBack(1);}

这样一来便可以了。

3.效果

实现后的效果如下图所示：

若需要增加链接跳转，可以添加点击函数，具体代码如下：

 <div class="col-md-12" :style="backgroundIndex"><!--<img src="/static/img/indexBackground.png"/>--><div style="padding-top: 100px"><img :src="indexCenter1" style="padding-right: 180px" @mouseover="changeIndex(1)" @mouseout="changeIndexBack(1)" @click=" goRouter(1)"/><img :src="indexCenter2" @mouseover="changeIndex(2)" @mouseout="changeIndexBack(2)" @click="goRouter(2)"/></div><div><img :src="indexCenter3" @mouseover="changeIndex(3)" @mouseout="changeIndexBack(3)" @click="goRouter(3)"/><img src="/static/img/indexCenter.png"><img :src="indexCenter4" @mouseover="changeIndex(4)" @mouseout="changeIndexBack(4)" @click="goRouter(4)"/></div><div style="padding-bottom: 100px"><img :src="indexCenter5" style="padding-right: 180px" @mouseover="changeIndex(5)" @mouseout="changeIndexBack(5)" @click="goRouter(5)"/><img :src="indexCenter6" @mouseover="changeIndex(6)" @mouseout="changeIndexBack(6)" @click="goRouter(6)"/></div></div>

跳转函数goRouter可以自己定义一下：

 goRouter(index){switch(index){case 1:this.$router.push({ path: '/' });break；}}

这样便完成了悬浮变换背景，同时点击跳往不同页面的效果，同时这样实现会有一个问题，对于分辨率过低的显示器可能会出现变形，经我测试，一般情况下的大众分辨率没什么太大问题。新手上路，恳请各位批评指正。