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 input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 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&amp;mysql(二)
2006/10/09 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
python requests证书问题解决
2019/09/05 Python
Python进程池Pool应用实例分析
2019/11/27 Python
python 等差数列末项计算方式
2020/05/03 Python
什么是Python中的匿名函数
2020/06/02 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
python的数学算法函数及公式用法
2020/11/18 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
Java面试题汇总
2015/12/06 面试题
关于母亲节的感言
2014/02/04 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
大学社团活动总结
2014/04/26 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
师德师风个人总结
2015/02/06 职场文书
通知的写法
2015/04/23 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python