Use JS to zoom in and out when you put the mouse on the image
|
Use JS to zoom in and out when the mouse is on the image. The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id='div_jpg' style="width: 200px;height: 200px;">
<img src="./128206.jpg" id="img" style="width: 100%;height: 100%;">
</div>
<script>
var img = document.getElementById('img')
var s1,s2
console.log(img)
// Image magnification effect i = 100;
img.addEventListener('mouseover',function(){
clearInterval(s1);
s1 = setInterval(function(){
i+=0.1;
img.style.width = (i)+'%';
img.style.height = (i)+'%';
i = parseFloat(i);
if(i>=120) clearInterval(s1);
},1);
})
img.addEventListener('mouseout',function(){
clearInterval(s2);
s2 = setInterval(function(){
i-=0.1;
img.style.width = (i)+'%';
img.style.height = (i)+'%';
i = parseFloat(i);
if(i<=100) clearInterval(s2);
})
})
</script>
</body>
</html>Share the source code, friends who like it click to view: Based on jQuery plug-in Pinchzoom.js to achieve finger touch picture zooming special effects source code jQuery mouse hovers over the picture to enlarge and slide to display the title special effect This concludes the article on how to use JS to zoom in and out by placing the mouse on an image. For more information on js image zooming in and out, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: MySql 5.6.35 winx64 installation detailed tutorial
>>: CentOS 7 installation and configuration tutorial under VMware10
Recommend
Canonical enables Linux desktop apps with Flutter (recommended)
Google's goal with Flutter has always been to...
Teach you how to use Nginx service to build a subdomain environment to improve the loading performance of 2D maps
1. Background Recently, some friends encountered ...
Illustration-style website homepage design New trend in website design
You can see that their visual effects are very bea...
Summary of the differences between MySQL and Oracle (comparison of functional performance, selection, SQL when using them, etc.)
1. Concurrency Concurrency is the most important ...
Example code for implementing dynamic skinning with vue+element
Sometimes the theme of a project cannot satisfy e...
VUE introduces the implementation of using G2 charts
Table of contents About G2 Chart use Complete cod...
Introduction to the difference between shortcut icon and icon code
Statement 1: <link rel="shortcut icon"...
HTML Self-study Journey (I) Basic Elements and Attributes Practice (Write Your Own Code)
I followed the tutorial on W3school. I think the t...
MySQL 8.0.18 adds users to the database and grants permissions
1. It is preferred to use the root user to log in...
MySQL slow query optimization: the advantages of limit from theory and practice
Many times, we expect the query result to be at m...
Solution to the problem that the background image of a label does not display in IE8
I encountered a small problem today and struggled ...
MySQL 5.5 installation and configuration graphic tutorial
Organize the MySQL 5.5 installation and configura...
Solution to MySQL replication failure caused by disk fullness
Table of contents Case scenario Solving the probl...
base target="" specifies the target of the base link to open the frame
<base target=_blank> changes the target fram...
Detailed analysis of MySQL 8.0 memory consumption
Table of contents 1. innodb_buffer_pool_size 2. i...