基于jquery实现滚轮放大缩小图片的函数代码
更新时间：2023年05月01日 11:33:40 作者：maidu_xbd
这篇文章主要介绍了基于jquery实现滚轮放大缩小图片的函数代码,需要的朋友可以参考下
以下是一份基本的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="../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="../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="../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="../static/img/111.jpg" border="1px" @click="bigimg()" />
</center>
<div id="outerdiv">
<div id="innerdiv">
<img id="bigimg" src="" 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`这两种不同浏览器的滚轮事件，以保证代码能够在不同的浏览器中正常运行。
相关文章
需要有个右下角弹层提示公告的，下面分享早些时候自己编写，以及现在还在应用的自动弹层，需要的朋友可以参考下2013-11-11
这是一个支付页面DEMO，有截图，非常逼真，感兴趣的朋友可以参考下2014-07-07
元素绑定jquery中的toggle后，元素隐藏，开始的时候 我怎么也没想到是这里有问题，我找了半天才发现是因为绑定了toggle方法2014-03-03
今天所要分享的控件是单选按钮，一个基于jquery扩展漂亮的单选按钮——RadioButton，喜欢的朋友可以收藏下2013-11-11
下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能，感兴趣的朋友可以参考下2015-11-11
jQuery UI AutoComplete 自动完成使用小记
jQuery UI AutoComplete 自动完成使用小记，使用jquery的朋友实现搜索自动完成等功能的朋友可以参考下。2010-08-08
这篇文章主要介绍了基于jquery插件实现拖拽删除图片功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要为大家详细介绍了jQuery表单验证插件与日历插件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
jqGrid是一款基于jQuery的功能强大的表格插件，使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信，jqGrid运行速度相当快，可以很好的应用在一些后台管理系统来管理大量数据的场合2015-12-12
这篇文章主要介绍了jQuery元素的隐藏与显示的方法,实例分析了hide与show的使用技巧,需要的朋友可以参考下2015-01-01
最新评论