这篇文章主要为大家详细介绍了vue实现tab切换的放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现tab切换的放大镜效果的具体代码，供大家参考，具体内容如下
废话不多说先看效果图
1.我这里并没有加遮罩层，如有需要请自行加上
2.图片建议使用4k高清图片，不然放大后模糊，影响观看心情
3.不用拘泥于样式，关注实现原理即可
4.可能我的方法并不简便，但是也是一种思路，请大家参考
实现原理
第一肯定需要vue.js
第二需要两张图片
左边为现实图片，右边放大后的效果图其实一直存在，只不过鼠标移入现实，鼠标移出消失
放大的图片并不是真正的放大，而是在img标签外套了一个父元素，将img标签的宽高都设置为百分之一百以上，至于放大多少你就设置多少，然后给父元素设置超出隐藏，再设置display：none让元素隐藏，等到鼠标移入左边大图的时候再显示
至于如何让鼠标移动放大的图片也会移动就是要获取鼠标在元素上移动的位置，用鼠标移动事件触发，然后给放大后的图片设置相对定位然后将鼠标的移动的X轴位置和Y轴位置分别赋值给大图的left和top
———————————–万能分割线—————————————-
简单来说，放大后的图片本来就存在只不过设置为隐藏，鼠标移入的后再显示，然后获取鼠标移动的位置赋值给大图的相对定位值，这就是放大镜的实现原理
tab切换就更简单了
需要用到vue的v-show来实现
在data中创建一个数组将图片地址存在数组中，通过v-for将图片地址遍历到img标签中
在data中创建一个nowindex，将图片索引赋值给nowindex通过v-show=“nowindex == index“来控制图片显示隐藏
下面就是代码
<title>Document</title> body { margin: 0; padding: 0; background-color: #ccc; } #app { height: 245px; width: 556px; /* border: 3px solid; */ position: relative; margin: 200px auto; box-sizing: border-box; } .content { height: 150px; width: 250px; border-bottom: 5px solid white; } .imgs { height: 90px; width: 248px; box-sizing: border-box; display: flex; justify-content: space-between; } .imger { height: 99%; width: 49.6%; } .content>img { height: 100%; width: 100%; } .active { box-shadow: 0px 8px 8px black; opacity: 0.7; } .fdj { display: none; } .block { height: 240px; width: 300px; position: absolute; top: 0px; right: -10px; overflow: hidden; z-index: 100; border-radius: 8px; } .block>img { height: 600%; width: 600%; position: relative; } <strong style="color:transparent">本文来源gao@daima#com搞(%代@#码@网&</strong> <div id="app"> <div class="content"> </div><div class="imgs"> </div><div> </div></div>
以上就是vue实现tab切换的放大镜效果的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：vue实现tab切换的放大镜效果
