今天小编给大家分享一下基于jquery怎么实现滚轮放大缩小图片的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
(1)滚轮控制放大缩小图片。
实现代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="https://www.maopiaopiao.com">
(2)点击图片,弹出遮罩层,再用滚轮控制图片缩放,该场景一般用于聊天对话框。
实现代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="https://www.maopiaopiao.com">
其他网友补充的函数
$(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`元素,接下来从滚轮事件中获取了用户的滚动方向,然后计算出当前图片的放大/缩小后的宽度和高度,并将其重新赋值给了图片元素。