vue实现鼠标移入小图片,大图显示效果
![](https://img2022.cnblogs.com/blog/2170636/202210/2170636-20221019142258573-812368596.png)
第一步,先设置ref,和移入事件
<div class="story-container" ref="storyContainer"> <div class="item-box" v-for="(item,index) in testImg" :key="index" @mouseover="showPic(index)"> <a class="item-a" :href="item.img"> <img :src="item.img" alt=""> </a> </div> </div>
右边大图片
v-for里面的 testImg
testImg:[ {img:'https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'}, {img:'https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'}, {img:'https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'}, {img:'https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'}, {img:'https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'}, {img:'https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'}, {img:'https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'}, ],
第二步, 实现的方法
// 鼠标放上小图片,大图片显示 showPic(whiPic){ let linksA=this.sCont.getElementsByClassName('item-a'); let sourceA=linksA[whiPic].getAttribute('href'); for(let i=0;i<linksA.length;i++){ linksA[i].classList.remove('hover'); } linksA[whiPic].classList.add('hover'); this.showImgBig.setAttribute('src',sourceA) },
第三步,获取ref,在什么周期的mounted()里面
这里的this.sCont,,这个sCont是要写在data(){return{ sCont:'' , }} 里面定义的,包括showImgBig
mounted() { if(!this.$refs.storyContainer) return false;if(!this.$refs.showImgBig) return false; this.sCont=this.$refs.storyContainer; this.showImgBig=this.$refs.showImgBig; // console.log(this.sCont) // console.log(this.hScroll) // console.log(this.btnScrollLeft) // console.log( this.btnScrollRight) // console.log(this.maxScroll) },