百度换肤功能实现(vue)

百度换肤功能实现(vue)

这是效果图

1. 鼠标移入左边小衣服那里，让小图显示，移出消失

2. 鼠标移入左边小衣服那里，并且点击之后，就算移出，小图也不消失

3. 鼠标移入小图，背景大图src替换为移入的小图的src，移出但不点击时，背景图变为原来那张

4. 点击小图时，背景大图src替换为小图src且移出src不变

   css部分

   *{
     margin: 0;
     padding: 0;
     list-style: none;
   }
   html,body{
     width: 100%;
     height: 100%;
     overflow: hidden;
   }
   ul{
     top: -100px;
     position: absolute;
     z-index:999;
     width: 1050px;
     height: 100px;
     background-color: #fff;
     transition: all .5s ease-in-out;
     left: 50%;
     margin-left: -525px;
     animation: top ;
     opacity: 0.9;
   }
   ul li{
     float: left;
     position: relative;
     line-height: 72px;
     text-align: center;
   }
   ul li .a{
     position: relative;
     width: 120px;
     height: 72px;
     margin: 14px 15px;
   }
   .bg{
     position: fixed;
     width: 100%;
     left: 0;
     top: 0;
   }
   li:hover::after{
     content: attr(img-title);
     width: 120px;
     height: 72px;
     position: absolute;
     left: 15px;
     top: 14px;
     color: #F2F6FC;
     background-color: rgba(0,0,0,.5);
   }
   .left{
     position: absolute;
     z-index: 999;
     top: -25px;
     left: 50%;
     margin-left: -561px;
     transition: all ease 0.5s;
   }
   .sprite{
     width: 21px;
     height: 21px;
     position: absolute;
     top: 14px;
     left: 15px;
     overflow: hidden;
     z-index:9999;
   }
   .sprite img{
     width: 135px;
     height: 92px;
     position: absolute;
     left: -62px;
     top: -1px;
   }
   

html部分

<!--利用事件委托  给最外层盒子增加鼠标移入事件-->
<div id="app" @mouseover.stop="leftOver">
   <!--利用一个变量flag判断此时状态   利用三元修改top值做到显示隐藏-->
  <img src="image/img.png" alt="" class="left" :style="{top:flag?'0':'-25px'}" @click="imgClick">
  <ul :style="{top:flag?'0':'-100px'}">
      <!--定义两个变量记录背景大图的src   一个nowSrc为显示的src  一个src为记录的src值-->
      <!--鼠标移入将item.src赋值给nowSrc  背景图变化  鼠标移出将记录的src赋值给nowSrc  让背景图重新变回之前的状态   创建一个点击事件将循环获得的item，index作为参数传递-->
    <li v-for="(item,index) in srcList" @mouseover="nowSrc=item.src" @mouseleave="nowSrc=src" @click="click(item,index)" :img-title="item.title">
        <!--这个div是精灵图  小图上打钩的效果-->
      <div class="sprite" v-if="index===imgIndex"><img src="image/tips.png" alt=""></div>
      <img :src="item.src" alt="" class="a">
    </li>
  </ul>
  <img :src="nowSrc" alt="" class="bg">
</div>

script部分

new Vue({
  el: '#app',
  data: {
    flag: false,
    //记录当前点击图片下标
    imgIndex: 0,
    //记录左侧下拉图片是否被点击
    isClick: false,
    //记录值
    src: 'image/1.jpg',
    //显示值
    nowSrc: 'image/1.jpg',
    //数据
    srcList: [
      {title: '你', src: 'image/1.jpg'},
      {title: '是', src: 'image/2.jpg'},
      {title: '最', src: 'image/3.jpg'},
      {title: '棒', src: 'image/4.jpg'},
      {title: '最', src: 'image/5.jpg'},
      {title: '卷', src: 'image/6.jpg'},
      {title: '的', src: 'image/7.jpg'}]
  },
  methods: {
    click(item, index) {
        //点击事件将记录值src   显示值nowSrc  当前图片下标  变为点击的item.src
      this.src = item.src
      this.nowSrc = item.src
      this.imgIndex = index
    },
    leftOver(e) {
      //这个e代表mouseEvent  判断此时移入的是否为左侧下拉小图
      if (e.target.className === 'left') {
        //第一次鼠标移入时  要进行判断是否被点击过  如果没被点击过就不用管   如果之前点击就让状态重置
        if (this.flag && this.isClick) {
          this.isClick = false
        }
        this.flag = true
        //当鼠标只有移入背景大图时   让小图ul和左侧下拉图隐藏
      } else if (e.target.className === 'bg') {
        if (this.isClick) return
        this.flag = false
      }
    },
    imgClick() {
      //左侧下拉图片点击事件   当没有被点击且flag为true时  才让isClick变为true
      if (this.flag && !this.isClick) this.isClick = true
      else {
        //当点击过  再点击应该让小图ul和左侧下拉图隐藏
        this.flag = !this.flag
        this.isClick = this.flag
      }
    }
  }
})

这个显示隐藏确实写的有点绕，我表达的也不太清楚，大伙儿可以自己去试试效果，然后理解一下