jQuery 实现鼠标滚动图片放大缩小

最新推荐文章于 2022-05-20 18:05:50 发布

Amazon Translator

最新推荐文章于 2022-05-20 18:05:50 发布

阅读量1.2k

点赞数 1

分类专栏： Jquery

本文链接：https://blog.csdn.net/qq_45140694/article/details/115329592

版权

Jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="">
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" type="text/javascript" charset="utf-8">
		</script>
		<script type="text/javascript">
			$(function() {
				function zoomImg(o) {
					var zoom = parseInt(o.style.zoom, 10) || 100;
					// 负数向下滚动，正数向上缩放
					zoom += event.wheelDelta / -12; //可适合修改
					if (zoom > 0) o.style.zoom = zoom + '%';
				}
				$(document).ready(function() {
					$("img").bind("mousewheel",
						function() {
							zoomImg(this);
							return false;
						});
				});
			})
		</script>
	</head>

	<body>
		<center>
			<img src="https://img95.699pic.com/photo/50055/5642.jpg_wh300.jpg" border="1px" />
		</center>
	</body>

</html>

Amazon Translator

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
jQuery 实现鼠标滚动图片放大缩小

<!DOCTYPE html><!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script src="htt
复制链接

扫一扫