jquery滚轮实现图片缩放

最新推荐文章于 2025-11-24 03:12:01 发布

最新推荐文章于 2025-11-24 03:12:01 发布 · 111 阅读

文章标签：

#javascript #xhtml #ViewUI

本文介绍如何使用jQuery库实现网页图片的鼠标滚轮缩放功能，提供了一个简单的事件监听器，使得用户可以通过滚动鼠标滚轮来调整图片大小。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>

<script type="text/javascript">

$(function(){
function zoomImg(o) {
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 2; //可适合修改
if (zoom > 0)
o.style.zoom = zoom + '%';
}

$(document).ready(function() {
$("img").bind("mousewheel", function() {
zoomImg(this);
return false;
});
});

})

</script>
</head>

<body>
<center>
<img src="1 (1).jpg"/>
</center>
</body>
</html>