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 相关文章推荐
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
node.js文件操作系统实例详解
Nov 05 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php短信接口代码
2016/05/13 PHP
php实现的顺序线性表示例
2019/05/04 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
layer弹出层扩展主题的方法
2019/09/11 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python字符编码判断方法分析
2016/07/01 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
Python中super函数用法实例分析
2019/03/18 Python
python超时重新请求解决方案
2019/10/21 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
Joules美国官网:出色的英国风格
2017/10/30 全球购物
公司新员工的演讲稿注意事项
2014/01/01 职场文书
校园文化建设方案
2014/02/03 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
员工辞退通知书
2015/04/17 职场文书
技能培训通讯稿
2015/07/18 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL