基于jquery实现滚轮放大缩小图片的函数代码
更新时间：2023年05月01日 11:33:40 作者：maidu_xbd
这篇文章主要介绍了基于jquery实现滚轮放大缩小图片的函数代码,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
以下是一份基本的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="">
<script src="http://9i0i.com/pic.php?p=../static/js/jquery-1.11.1.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="http://9i0i.com/pic.php?p=../static/img/111.jpg" border="1px" />
</center>
</body>
</html>（2）点击图片，弹出遮罩层，再用滚轮控制图片缩放，该场景一般用于聊天对话框。
实现代码如下：
<!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="http://9i0i.com/pic.php?p=../static/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<style>
/*************图片预览************/
#outerdiv {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
width: 100%;
height: 100%;
display: none;
}
#innerdiv {
position: absolute;
}
#bigimg {
border: 5px solid #fff;
cursor: pointer;
}
</style>
<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 id="img" src="http://9i0i.com/pic.php?p=../static/img/111.jpg" border="1px" @click="bigimg()" />
</center>
<div id="outerdiv">
<div id="innerdiv">
<img id="bigimg" src="http://9i0i.com/pic.php?p=" onmousewheel="bigimg(this)" />
</div>
</div>
<script>
$(`#img`).click(function() {
var _this = $(this); //将当前的img元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
})
// 图片缩放
function bigimg(obj) {
// alert(parseInt(obj.style.zoom, 10));
//obj是一个对象，初始时obj并没有zoom属性，所以给zoom赋值为100；
var zoom = parseInt(obj.style.zoom, 10) || 100;
//每次滚动鼠标时，改变zoom的大小
//event.wheelDelta有两个值，120，-120，取值情况取决于滚动鼠标的方向；
zoom += event.wheelDelta / 12; //每次滚动加减10
if (zoom > 0)
obj.style.zoom = zoom + '%'; //更改后的zoom赋值给obj
return false;
}
// 预览图片
function imgShow(outerdiv, innerdiv, bigimg, _this) {
var src = _this.attr("src"); //获取当前点击的pimg元素中的src属性
$(bigimg).attr("src", src); //设置#bigimg元素的src属性
/*获取当前点击图片的真实大小，并显示弹出层及大图*/
$("<img />").attr("src", src).load(function() {
var windowW = $(window).width(); //获取当前窗口宽度
var windowH = $(window).height(); //获取当前窗口高度
var realWidth = this.width; //获取图片真实宽度
var realHeight = this.height; //获取图片真实高度
var imgWidth, imgHeight;
var scale = 0.8; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
if (realHeight > windowH * scale) { //判断图片高度
imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放
imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度
if (imgWidth > windowW * scale) { //如宽度扔大于窗口宽度
imgWidth = windowW * scale; //再对宽度进行缩放
}
} else if (realWidth > windowW * scale) { //如图片高度合适，判断图片宽度
imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放
imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度
} else { //如果图片真实高度和宽度都符合要求，高宽不变
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放
var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距
var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距
$(innerdiv).css({ "top": h, "left": w }); //设置#innerdiv的top和left属性
$(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg
});
$(outerdiv).click(function() { //再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
}
</script>
</body>
</html>其他网友补充的函数
$(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编写的放大镜插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要为大家详细介绍了jquery遍历json对象集合、jQuery 遍历JSON对象、jquery中遍历读取json串中的对象三种情况，感兴趣的小伙伴们可以参考一下2016-05-05
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
官方文档的解释有点含糊，其实换个角度就很容易理解了，scrollTop获取的是内部元素超出外部容器的高度。 例如：$('window').scrollTop()获取的就是当前这个页面超出窗口最上端的高度，scrollLeft与此同理2015-05-05
这篇文章主要为大家详细介绍了jQuery Masonry瀑布流布局神器的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了jQuery实现模糊查询的方法,结合实例形式分析了jQuery事件响应、节点遍历、查询匹配、属性修改等相关操作技巧,需要的朋友可以参考下2018-05-05
本文主要介绍了Ajax基本概念；Ajax的异步加载局部刷新功能的实现；通过XMLHttpRequest发送请求。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
本节任务是从一个HTML表使用一些时髦的效果，只要按一下该行的行。以下是实现这一目标的jQuery代码2014-10-10
简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)
jquery版，简单易用的jQuery 版仿新浪微博 向下滚动效果，现在越来越发现jquery太强大咯，哈哈。2011-02-02
在表单的输入验证中，经常要当用户没能正确输入后，要提示“XXXX输入错误”这一类的信息，如何能搞到动态一点呢，今天发现jquery中的一个不错的效果，笔记之。2010-08-08
jQuery对表单的操作代码集合，学习jquery的朋友可以参考下。2011-04-04
最新评论