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
HTML table markup tutorial (14): table header
<br />In HTML language, you can automaticall...
How to solve the mysql error 1033 Incorrect information in file: 'xxx.frm'
Problem Description 1. Database of the collection...
HTML table markup tutorial (29): cell light border color attribute BORDERCOLORLIGHT
In cells, light border colors can be defined indi...
Method of using MySQL system database for performance load diagnosis
A master once said that you should know the datab...
Detailed explanation of nmcli usage in CentOS8
Common nmcli commands based on RHEL8/CentOS8 # Vi...
Linux ssh server configuration code example
Use the following terminal command to install the...
Detailed explanation of ssh password-free login configuration method (pictures and commands)
First, let me explain that what we want to do is ...
How to manage users and groups when running Docker
Docker is a management tool that uses processes a...
MySQL multi-table join introductory tutorial
Connections can be used to query, update, and est...
Solution to slow response of Tomcat server
1. Analytical thinking 1. Eliminate the machine&#...
How to customize Docker images using Dockerfile
Customizing images using Dockerfile Image customi...
Ubuntu 18.04 installs mysql 5.7.23
I installed MySQL smoothly in Ubuntu 16.04 before...
How to hide the version number in Nginx
Nginx hides version number In a production enviro...
Importance of background color declaration when writing styles
As the title says, otherwise when the page is revi...
An example of using Lvs+Nginx cluster to build a high-concurrency architecture
Table of contents 1. Lvs Introduction 2. Lvs load...