Vue implements the magnifying glass effect of tab switching
|
This article example shares the specific code of Vue to achieve the magnifying glass effect of tab switching for your reference. The specific content is as follows Without further ado, let’s take a look at the renderings
1. I didn't add a mask layer here, please add one if necessary 2. It is recommended to use 4K high-definition pictures, otherwise they will be blurred after being enlarged, which will affect the viewing mood 3. Don’t be too rigid about the style, just focus on the implementation principle 4. Maybe my method is not simple, but it is also a way of thinking. Please refer to it. Implementation principleFirst of all, you definitely need vue.js The second one requires two pictures The left side is the real picture, and the right side is the enlarged effect picture. In fact, it has always existed, but it just moves the mouse into the reality and disappears when the mouse moves out. The enlarged image is not really enlarged, but a parent element is added to the img tag, and the width and height of the img tag are set to more than 100%. You can set the enlargement amount as you like, and then set the parent element to be hidden when it exceeds the limit, and then set display:none to hide the element, and then display it when the mouse moves into the large image on the left. As for how to make the enlarged image move when the mouse moves, we need to get the position of the mouse on the element, trigger it with the mouse movement event, set the relative positioning for the enlarged image, and then assign the X-axis position and Y-axis position of the mouse to the left and top of the large image respectively. ----------------------------------- Universal dividing line ---------------------------------------- Simply put, the enlarged image already exists but is set to be hidden. It will be displayed after the mouse moves in, and then the position of the mouse is obtained and assigned to the relative positioning value of the large image. This is the implementation principle of the magnifying glass. Tab switching is easier You need to use vue's v-show to create an array in data and store the image address in the array. Use v-for to traverse the image address to the img tag. Create a nowindex in data and assign the image index to nowindex. Use v-show="nowindex == index" to control the display and hide of the image. Here is the code
<!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: {
//Image address url: ['./img/11.jpg', "./img/9.jpg"],
nowindex: 0,
blocks: "fdj",
//Relative positioning value positions: {
top: 0,
left: 0
}
},
methods: {
change(index) {
//Switch the picture this.nowindex = index;
},
over() {
//Display and hide by changing the class name this.blocks = "block"
},
out() {
this.blocks = "fdj"
},
move(e) {
//Assign the mouse moving position to the relative positioning value of the image to realize the movement of the image when the mouse moves this.positions.top = (e.offsetY * -7.9) + "px";
this.positions.left = (e.offsetX * -6) + "px";
}
},
})
</script>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Docker installs Redis and introduces the visual client for operation
>>: Implementation of two basic images for Docker deployment of Go
Recommend
MySQL 5.7.27 installation and configuration method graphic tutorial
The installation tutorial of MySQL 5.7.27 is reco...
Click the button to turn the text into an input box, click Save to turn it into text implementation code
Click the button to turn the text into an input b...
The latest super detailed VMware virtual machine download and installation graphic tutorial
Table of contents 1. Download the virtual machine...
Introduction to ufw firewall in Linux
Let's take a look at ufw (Uncomplicated Firew...
Summary of several key points about mysql init_connect
The role of init_connect init_connect is usually ...
Detailed explanation of HTML basic tags and structures
1. HTML Overview 1.HTML: Hypertext Markup Languag...
Try Docker+Nginx to deploy single page application method
From development to deployment, do it yourself Wh...
Detailed explanation of Vuex environment
Table of contents Build Vuex environment Summariz...
Detailed explanation of MySQL from getting started to giving up - installation
What you will learn 1. Software installation and ...
A brief introduction to protobuf and installation tutorial in Ubuntu 16.04 environment
A brief introduction to protobuf Protobuf is Goog...
Detailed explanation of the process of zabbix monitoring sqlserver
Let's take a look at zabbix monitoring sqlser...
JavaScript implements random generation of verification code and verification
This article shares the specific code of JavaScri...
In-depth explanation of Vue multi-select list component
A Multi-Select is a UI element that lists all opt...
Vue uses el-table to dynamically merge columns and rows
This article example shares the specific code of ...
Installation steps of mysql under linux
1. Download the mysql tar file: https://dev.mysql...