合理的使用鼠标滚轮能很好的提高用户体验,今天就让我们看看 jQuery 鼠标滚轮实现图片的缩放。首先,直接给出缩放方法如下:
function zoomImg(o) {
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 2; //可适合修改
if (zoom > 0)
o.style.zoom = zoom + '%';
}
方法在这里就不做说明了,如果不清楚原理,可以设置断点来调试下,可以参考下Google Chrome调试js入门。方法中参数为 DOM 对象(即当前图片),调用如下:
$(document).ready(function() {
$("img").bind("mousewheel", function() {
zoomImg(this);
return false;
});
});
到这我们就实现了鼠标滚轮来实现对图片的缩放功能,用户滚动鼠标滚轮时即可实现图片的缩放,提高了用户体验。
html代码
<html>
<head>
<meta http-equiv="Content_Type" content="text/html; charset=utf-8"/>
<title>jQuery 鼠标滚轮实现图片缩放</title>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript">
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>
<div>
<img src="E:\\3-130514100338.jpg"/>
</div>
</body>
</html>
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-mousewheel-zoom-image.html