Vue.js鼠标悬浮更换图片功能
作者:HaiJing1995 发布时间:2024-04-30 10:42:35
标签:Vue.js,悬浮,更换
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样:
这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现。
首先将所有的选中后图片都覆盖到没选中图片上
html代码如下
<ul>
<li>
<a href="">
<img src="../../../img/goods/study.png" alt="学习">
<img class="hide_tab" src="../../../img/goods/study_1.png" alt="学习">
</a>
</li>
<li>
<a href="">
<img src="../../../img/goods/life.png" alt="生活">
<img class="hide_tab" src="../../../img/goods/life_1.png" alt="生活">
</a>
</li>
<li>
<a href="" >
<img src="../../../img/goods/sport.png" alt="运动">
<img class="hide_tab" src="../../../img/goods/sport_1.png" alt="运动">
</a>
</li>
<li>
<a href="">
<img src="../../../img/goods/clothes.png" alt="服饰">
<img class="hide_tab" src="../../../img/goods/clothes_1.png" alt="服饰">
</a>
</li>
<li>
<a href="" >
<img src="../../../img/goods/hat.png" alt="鞋帽">
<imgclass="hide_tab" src="../../../img/goods/hat_1.png" alt="鞋帽">
</a>
</li>
<li>
<a href="" >
<img src="../../../img/goods/food.png" alt="食品">
<img class="hide_tab" src="../../../img/goods/food_1.png" alt="食品">
</a>
</li>
<li>
<a href="">
<img src="../../../img/goods/other.png" alt="其他">
<img class="hide_tab" src="../../../img/goods/other_1.png" alt="其他">
</a>
</li>
</ul>
css代码如下
.right {
float: left;
ul {
margin-left: 1px;
li {
display: inline-block;
margin-left: 12px;
width: 100px;
height: 100px;
a{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
.hide_tab{
position: absolute;
bottom: 0;
}
}
}
}
}
其实就是很简单的通过position:absolute进行了布局,现在选中样式的图片已经全部覆盖到了没有选中样式图片之上了。
接下来就需要一个变量控制他们的显隐。这个变量应该是一个和每个分类一一对应的,那这个变量就不应该是一个简单的布尔值,而是一个数字,和每个分类图片对应。
我定义这个变量叫做active,在data中声明
data(){
return{
active: 0
}
}
再定义一个方法控制active变量的变化
showActive(index) {
this.active = index;
}
方法中的index参数就是鼠标悬浮时传入的值
修改html代码如下
<ul>
<li>
<a href="" @mouseenter="showActive(1)" @mouseleave="showActive(0)">
<img src="../../../img/goods/study.png" alt="学习">
<img v-show="active === 1" class="hide_tab" src="../../../img/goods/study_1.png" alt="学习">
</a>
</li>
<li>
<a href="" @mouseenter="showActive(2)" @mouseleave="showActive(0)">
<img src="../../../img/goods/life.png" alt="生活">
<img v-show="active === 2" class="hide_tab" src="../../../img/goods/life_1.png" alt="生活">
</a>
</li>
<li>
<a href="" @mouseenter="showActive(3)" @mouseleave="showActive(0)">
<img src="../../../img/goods/sport.png" alt="运动">
<img v-show="active === 3" class="hide_tab" src="../../../img/goods/sport_1.png" alt="运动">
</a>
</li>
<li>
<a href="" @mouseenter="showActive(4)" @mouseleave="showActive(0)">
<img src="../../../img/goods/clothes.png" alt="服饰">
<img v-show="active === 4" class="hide_tab" src="../../../img/goods/clothes_1.png" alt="服饰">
</a>
</li>
<li>
<a href="" @mouseenter="showActive(5)" @mouseleave="showActive(0)">
<img src="../../../img/goods/hat.png" alt="鞋帽">
<img v-show="active === 5" class="hide_tab" src="../../../img/goods/hat_1.png" alt="鞋帽">
</a>
</li>
<li>
<a href="" @mouseenter="showActive(6)" @mouseleave="showActive(0)">
<img src="../../../img/goods/food.png" alt="食品">
<img v-show="active === 6" class="hide_tab" src="../../../img/goods/food_1.png" alt="食品">
</a>
</li>
<li>
<a href="" @mouseenter="showActive(7)" @mouseleave="showActive(0)">
<img src="../../../img/goods/other.png" alt="其他">
<img v-show="active === 7" class="hide_tab" src="../../../img/goods/other_1.png" alt="其他">
</a>
</li>
</ul>
只有在当前index和active相等时,才会显示已选中分类的图片。
而鼠标离开时,传入一个没有与之对应的0,这样就没有显示了。
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
0
投稿
猜你喜欢
- 写在前面的话:此篇还是asp相关的,相信玩ASP的都有这个感觉,当数据有5万多条时-------just like音乐网,要调用最新的10条
- python版本: 3.6pandas版本: 0.23.4行索引索引行有三种方法,分别是 loc iloc iximport pandas
- 引言python的一个优势是有着大量自带和在线的模块(module)资源,可以提供丰富的功能,在使用这些模块的时候,如果每次都去网站找在线文
- 一,子选择基本用法 1,子选择的定义 子迭择允许把一个查询嵌套在另一个查询当中。比如说:一个考试记分项目把考试事件分为考试(T)和测验(Q)
- Node.js应用不需要经过编译过程,可以直接把源代码拷贝到部署机上执行,确实比C++、Java这类编译型应用部署方便。然而,Node.js
- 本文实例讲述了Python读取Pickle文件信息并计算与当前时间间隔的方法。分享给大家供大家参考,具体如下:python—–读取Pickl
- 一、基础介绍Go 是静态(编译型)语言,是区别于解释型语言的弱类型语言(静态:类型固定,强类型:不同类型不允许直接运算)例如 python
- 本文实例讲述了Python基于回溯法子集树模板解决0-1背包问题。分享给大家供大家参考,具体如下:问题给定N个物品和一个背包。物品i的重量是
- Python 解释器内置了一些常量和函数,叫做内置常量(Built-in Constants)和内置函数(Built-in Function
- 下面展示一下非瀑布流的item布局情况,每个item的高度都是一样的,所以 他的index就是左右左右,position所对应的itemVi
- 需求:项目中需要把链接地址生成二维码,用户扫描二维码就可以打开页面实现如下:使用了vue-qriously插件使用步骤:安装npm inst
- meta是html语言head区的一个辅助性标签。几乎所有的网页里,我们可以看到类似下面这段的html代码:<head> <meta&nbs
- mysql> select 'name',id from table_b; //'name' 不在ta
- 在客户端请求的时候增加了自定义的http头,请求如下所示: 自定义http请求头var_dump(getallheaders);一
- 一个朋友给她的朋友买礼物。撕心裂肺、绞尽脑汁。最后蹦出来一个主意:“送打火机”我不知道小妞们通过哪的投票,就这么断定男人都喜欢打火机。导致一
- 在本篇文章中,我们将探讨如何使用YOLOv5车牌识别系统实现实时监控与分析。我们将介绍如何将模型应用于实时视频流,以及如何分析车牌识别结果以
- 日常在网站使用过程中经常遇到图形验证,今天准备自己做个图形验证码,这算是个简单的功能,也适合新手练习的,便于自己学习。 主要用到的库--PI
- 1. 递归1.1 定义函数作为一种代码封装, 可以被其他程序调用,当然,也可以被函数内部代码调用。这种函数定义中调用函数自身的方式称为递归。
- 人们对于产品设计这类事情,往往容易眼高手低,在宇宙层面上夸夸其谈,却落不了地,只能飘着。真正到了自己动手的时候,才会发现问题很多,实践和理论
- 在windows下安装Mysql系统日志出现max_open_files: 2048 max_connections: 510 table_