Vue.js鼠标悬浮更换图片功能


Posted in Javascript onMay 17, 2017

最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样:

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组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
javascript事件模型代码
Jul 01 Javascript
Javascript 解疑
Nov 11 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
12个非常有用的JavaScript技巧
May 17 #Javascript
Javascript中的async awai的用法
May 17 #Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 #Javascript
angular.fromJson与toJson方法用法示例
May 17 #Javascript
Node.js编写CLI的实例详解
May 17 #Javascript
ES6入门教程之Class和Module详解
May 17 #Javascript
AngularJS实现动态添加Option的方法
May 17 #Javascript
You might like
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Pycharm学习教程(1) 定制外观
2017/05/02 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
如何通过Python实现标签云算法
2019/07/02 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Python面向对象实现方法总结
2020/08/12 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
男女朋友协议书
2014/04/23 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
工业设计专业自荐书
2014/06/05 职场文书
联片教研活动总结
2014/07/01 职场文书