js_脚本之家,js鼠标悬浮图片

金沙8331网址,问题:应用vue加载图片变量,为了图片的自适应,需安装为背景图居中排布

Vue.js鼠标悬浮改动图片成效,vue.js鼠标悬浮图片

如今和好做的品类中设计员须要分类栏中鼠标悬停更改图片,大约完结出来的功效就是如此:

金沙8331网址 1

其一在jQuery中是个很简短的事,不过在vue中自己要么率先次实现。

率先将全数的入选后图片都掩没到没选中图片上

js_脚本之家,js鼠标悬浮图片。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组件学习课程进行学习。

上述正是本文的全部内容,希望对我们的上学抱有扶助,也盼望咱们多多点拨帮客之家。

方今和好做的项目中设计员须求分类栏中鼠标悬停更动图片,大约达成出来的职能正是那样…

审核中

{{item.publishdate}}

sss

删除

行内样式的写法:

v-bind:style="{backgroundImage:'url(' + item.videopic + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"

如上这篇vue的style绑定background-image的情势和其余变量数据的界别精解就是作者分享给大家的全体内容了,希望能给咱们三个参照,也冀望大家多多指教脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注