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“来控制图片显示隐藏
下面就是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue/vue.js"></script>
<style>
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;
}
</style>
</head>
<body>
<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>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue图片放大镜组件的封装使用详解
基于Vue的图片放大镜组件封装,供大家参考,具体内容如下 图片放大镜的实现过程是将一个小图放置在一个盒子里,当鼠标在小图盒子里移动时,出现一个移动块(阴影区域/遮罩层),右侧大图片盒子出现一个等比例放大的在小图盒子移动块中的图片内容.效果图如下: 实现图片放大镜效果的Vue组件代码如下: <template> <div> <div class="move" @mouseover="over()" @mouseout="out(
-
vue实现带放大镜的搜索框
本文实例为大家分享了vue实现带放大镜的搜索框,供大家参考,具体内容如下 字体图标在input单标签中的用法: 第一步,先在main.js 中全局引入iconfont图标: 第二步,给input 标签动态绑定一个属性,设置值为data中的变量: 第三步,将字体图标代码中的 &#x 改为 \u 代码如下: <template> <div class="login"> <!--头部搜索 --> <div class="top&qu
-
一个手写的vue放大镜效果
组件使用less,请确保已安装loader 本组件为放大镜组件,传参列表为: •width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍 •picList:必传,传入图片列表 使用示例: script: import mirror from 'xx/mirror' export default { components:{ mirror }, data(){ return { width:300, picList:[ xxxxxx, xxxxxx ], } } } html:
-
vue实现商品详情页放大镜功能
本文实例为大家分享了vue实现商品详情页放大镜的具体代码,供大家参考,具体内容如下 templates中内容 <div class="productLeft"> <!-- 左侧中图 --> <div class="mdImg"> <img :src="require('../assets/imgs/details/'+mdImgUrl)" alt=""> </div>
-
vue实现放大镜效果
本文实例为大家分享了vue实现放大镜效果的具体代码,供大家参考,具体内容如下 实现类淘宝放大镜效果 前端小白一枚,最近在进行 vue 方面的学习,逛淘宝闲来无事想试试做个放大镜,结果虽然做出来了,但其中有一些问题让我无法解决,四处搜索也没有找到满意的答案,很是心烦,希望能有大佬帮忙解答,谢谢 步骤思路 对原图的显示空间(left) 可以将显示原图的 img 换成 canvas,来对图片进行保护 跟随鼠标移动时显示放大的指示区(鼠标层罩top) 显示层罩区域选中放大的显示空间(right) HTM
-
基于vue2.x的电商图片放大镜插件的使用
最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下.小白第一次分享,各位大神莫见笑. vue-piczoom picture magnifier component for Vue.js 2.x 基于vue2.x的电商图片放大镜插件 GIF 动画截图 Build Setup 使用步骤 # 安装 install npm install vue-piczoom --save 使用 use --
-
Vue3实现图片放大镜效果
本文实例为大家分享了Vue3实现图片放大镜效果的具体代码,供大家参考,具体内容如下 实现效果 代码 <template> <div class="goods-image"> <!-- 大图容器 --> <div class="large" :style="[ { backgroundImage: `url(${imageList[curId]})`, backgroundPositionX: position.ba
-
vue实现简单放大镜效果
本文实例为大家分享了vue实现简单放大镜效果的具体代码,供大家参考,具体内容如下 <template> <div> <div class="imgMerror"> <div class="smallDiv" @mousemove="move($event)" @mouseenter="enter()" @mouseleave="leave()"> <im
-
Vue3.0 自己实现放大镜效果案例讲解
需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏. css中的cursor https://www.runoob.com/cssref/pr-class-cursor.html 鼠标跟随效果如何实现: (子绝父相)绝对定位 + 修改top,left控制移动 在@vueuse中,有一个工具方法:useMouseInElement <template> <div ref="target"> <h1>H
-
基于Vue的商品主图放大镜方案详解
前言 在做电商类应用时,难免会遇到商品主图实现放大镜效果的场景,现有的基于 Vue 的第三方包不多并且无法直接复用,今天,我来分享一种高稳定性的基于 Vue 的图片放大镜方法. 实现原理 放大镜的原理用一句话概括,就是根据小图上的鼠标位置去定位大图. 图1 原理图(以2倍放大为例) 相信原理图已经画的很明白了, 图中,左侧框是小图框,其蓝色区域为图片遮罩层(需放大区域),右侧框是整个大图目前所在区域,其蓝色区域是放大区域,设置超出隐藏,就实现了放大遮罩区域的效果. 显然,两块蓝色区域存在着某种对