这篇文章主要介绍了基于jquery实现滚轮放大缩小图片的函数代码,需要的朋友可以参考下
以下是一份基本的jquery实现滚轮放大缩小图片的函数代码
（1）滚轮控制放大缩小图片效果如图：
实现代码如下：
（2）点击图片，弹出遮罩层，再用滚轮控制图片缩放，该场景一般用于聊天对话框。
实现代码如下：
其他网友补充的函数
$(document).ready(function() { function zoomImage(event) { event.preventDefault(); var image = $(this).find('img'); var delta = event.originalEvent.deltaY || event.originalEvent.detail || event.originalEvent.wheelDelta; var zoom = delta > 0 ? -0.2 : 0.2; var newWidth = image.width() + (image.width() * zoom); var newHeight = image.height() + (image.height() * zoom); image.width(newWidth).height(newHeight); } $('div.image-container').on('mousewheel DOMMouseScroll', zoomImage); });在这个代码中，我们首先为每个包含图片的`div`元素附加了一个滚轮事件监听器，当用户在这些元素上滚动滚轮时，会调用`zoomImage`函数进行放大/缩小操作。
在`zoomImage`函数内部，我们首先通过`$(this).find('img')`选择器找到了当前元素内的`img`元素，接下来从滚轮事件中获取了用户的滚动方向，然后计算出当前图片的放大/缩小后的宽度和高度，并将其重新赋值给了图片元素。
值得注意的是，在这个代码中我们同时监听了`mousewheel`和`DOMMouseScroll`这两种不同浏览器的滚轮事件，以保证代码能够在不同的浏览器中正常运行。
以上就是基于jquery实现滚轮放大缩小图片的函数代码的详细内容，更多请关注0133技术站其它相关文章！
