vue代码示例：实现tab切换的放大镜效果

2023-04-2616:35:32WEB前端开发Comments1,066 views字数 3112阅读模式

效果图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

vue代码示例：实现tab切换的放大镜效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

1.我这里并没有加遮罩层，如有需要请自行加上文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

2.图片建议使用4k高清图片，不然放大后模糊，影响观看心情文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

3.不用拘泥于样式，关注实现原理即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

4.可能我的方法并不简便，但是也是一种思路，请大家参考文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

实现原理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

第一肯定需要vue.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

第二需要两张图片文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

左边为现实图片，右边放大后的效果图其实一直存在，只不过鼠标移入现实，鼠标移出消失文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

放大的图片并不是真正的放大，而是在img标签外套了一个父元素，将img标签的宽高都设置为百分之一百以上，至于放大多少你就设置多少，然后给父元素设置超出隐藏，再设置display：none让元素隐藏，等到鼠标移入左边大图的时候再显示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

至于如何让鼠标移动放大的图片也会移动就是要获取鼠标在元素上移动的位置，用鼠标移动事件触发，然后给放大后的图片设置相对定位然后将鼠标的移动的X轴位置和Y轴位置分别赋值给大图的left和top文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

简单来说，放大后的图片本来就存在只不过设置为隐藏，鼠标移入的后再显示，然后获取鼠标移动的位置赋值给大图的相对定位值，这就是放大镜的实现原理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

tab切换就更简单了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

需要用到vue的v-show来实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

在data中创建一个数组将图片地址存在数组中，通过v-for将图片地址遍历到img标签中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

在data中创建一个nowindex，将图片索引赋值给nowindex通过v-show=“nowindex == index“来控制图片显示隐藏文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

下面就是代码?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<meta charset="UTF-8">
<meta name="viewport" content=">
<title>Document</title>
<script src=" .="" vue="" vue.js"="">
<style>
    body {
        margin: 0;
        padding: 0;
        background-color: #ccc;
    }
    
    #app {
        
        
        /* border: 3px solid; */
        position: relative;
        margin: 200px auto;
        box-sizing: border-box;
    }
    
    .content {
        
        
        border-bottom: 5px solid white;
    }
    
    .imgs {
        
        
        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 {
        
        
        position: absolute;
        top: 0px;
        right: -10px;
        overflow: hidden;
        z-index: 100;
        border-radius: 8px;
    }
    
    .block>img {
        height: 600%;
        width: 600%;
        position: relative;
    }
</style>
<div id="app">
    <div class="content" @mouseover="over" @mouseout="out" @mousemove="move($event)">
        <img :src="item" v-for="(item,index) in url" v-show="index == nowindex">
    </div>
    <div class="imgs">
        <img :src="item" v-for="(item,index) in url" class="imger" @click="change(index)" :class="{active:index == nowindex}">
    </div>
    <div :class="blocks">
        <img :src="item" v-for="(item,index) in url" v-show="index == nowindex" :style="positions">
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            //图片地址
            url: ['./img/11.jpg', "./img/9.jpg"],
            nowindex: 0,
            blocks: "fdj",
            //相对定位的值
            positions: {
                top: 0,
                left: 0
            }
        },
        methods: {
            change(index) {
                //图片的切换
                this.nowindex = index;
            },
            over() {
                //通过更改类名实现显示隐藏
                this.blocks = "block"
            },
            out() {
                this.blocks = "fdj"
            },
            move(e) {
                //将鼠标移动位置赋值给图片相对定位的值，实现鼠标移动图片移动
                this.positions.top = (e.offsetY * -7.9) + "px";
                this.positions.left = (e.offsetX * -6) + "px";
            }
        },
    })
</script>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37307.html
  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/gcs/37307.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定