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:

js realizes the effect of clicking on the picture to pop up and enlarge it in the middle of the screen
js to achieve image enlargement display effect
js realizes image rotation js scrolls the middle of the mouse to zoom in and out of the image
JS clicks on the thumbnail to enlarge the picture in the center of the whole screen

<<: MySql 5.6.35 winx64 installation detailed tutorial

>>: CentOS 7 installation and configuration tutorial under VMware10