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
My CSS architecture concept - it varies from person to person, there is no best, only suitable
Preface <br />I have been working in the fro...
JS interview question: Can forEach jump out of the loop?
When I was asked this question, I was ignorant an...
Use of Linux usermod command
1. Command Introduction The usermod (user modify)...
How to solve the error of connecting to the database when ServerManager starts
Servermanager startup connection database error R...
HTML drawing user registration page
This article shares the specific implementation c...
Several ways to add timestamps in MySQL tables
Scenario: The data in a table needs to be synchro...
The One-Hand Rule of WEB2.0
<br />My previous article about CSS was not ...
MySQL limit performance analysis and optimization
1. Conclusion Syntax: limit offset, rows Conclusi...
Detailed explanation of MySQL syntax, special symbols and regular expressions
Mysql commonly used display commands 1. Display t...
Beginner's guide to building a website ⑥: Detailed usage of FlashFXP
Today I will introduce the most basic functions of...
Introduction to the use of form OnSubmit and input type=image
If there is an <input type="image">...
Solve the problem of regular automatic file deletion by crontab+shell script under Centos7
Problem description: Recently, there is a demand ...
Create a new user in Linux and grant permissions to the specified directory
1 Create a user and specify the user's root p...
VMware, nmap, burpsuite installation tutorial
Table of contents VMware BurpSuite 1. Virtual mac...
MySQL tutorial data definition language DDL example detailed explanation
Table of contents 1. Introduction to the basic fu...