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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
jquery中键盘事件小结
Feb 24 Javascript
JavaScript Promise 用法
Jun 14 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
Vue渲染过程浅析
Mar 14 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
加强版phplib的DB类
2008/03/31 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
javascript每日必学之循环
2016/02/19 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
python获取网页状态码示例
2014/03/30 Python
web.py中调用文件夹内模板的方法
2014/08/26 Python
python实现多线程网页下载器
2018/04/15 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
python适合人工智能的理由和优势
2019/06/28 Python
Django实现网页分页功能
2019/10/31 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
opencv实现图像几何变换
2021/03/24 Python
求职导师推荐信范文
2015/03/27 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android