图片预览，且鼠标滚轮缩放

<!DOCTYPE html>
<head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width"><title>预览图片-滚轮缩放</title><style>#outerbox {width:100%;height:100%;display:none;position:fixed;top:0;left:0;background:rgba(0,0,0,0.6);z-index:9;
}
#innerbox {position:absolute;z-index:99;
}
#innerbox #bigimg {cursor:grab;border:5px solid #ffffff;border-radius:10px;
}</style></head>
<body><div id="conbox"><p><img class="imgitem" src="https://www.jq22.com/img/cs/500x300-1.png" alt="My Image"></p><p><img class="imgitem" src="https://www.jq22.com/img/cs/500x300-2.png" alt="My Image"></p>
</div><div id="outerbox"><div id="innerbox"><img id="bigimg" src=""></div>
</div><script src="http://code.jquery.com/jquery-2.1.4.min.js"></script><script >$(function() {var scaling = 1; //图片的缩放比例: 1 为正常大小; 0 会消失，所以不能小于等于// 点击图片放大$('.imgitem').each(function() {$(this).click(function() {var _this = $(this); //将当前点击的图片元素作为_this传入函数showBigImg('#outerbox', '#innerbox', '#bigimg', _this)})})function showBigImg(outerbox, innerbox, bigimg, _this) {var src = _this.attr('src'); //获取当前点击图片元素的src属性$(bigimg).attr('src', src); //设置#bigimg元素的src属性值/* 获取当前点击图片的真实大小，并显示弹出层及大图 */$(bigimg).attr('src', src).load(function() {var windowW = $(window).width(); //获取当前窗口宽度var windowH = $(window).height(); //获取当前窗口高度var realW = this.width; //获取图片真实宽度var realH = this.height; //获取图片真实高度var imgW, imgH;var scale = 0.8; //当图片的真实宽高大于窗口的宽高时要进行的缩放尺寸if (realH > windowH * scale) { //判断图片高度imgH = windowH * scale; //如大于窗口高度，图片高度进行缩放imgW = imgH / realH * realW; //等比例缩放宽度if (imgW > windowW * scale) { //如宽度仍大于窗口宽度imgW = windowW * scale; //再对宽度进行缩放}} else if (realW > windowW * scale) { //如图片高度合适，判断图片宽度imgW = windowW * scale; //图片宽度进行缩放imgH = imgW / realW * realH; //等比例缩放高度} else { //如图片真实宽高都符合要求，宽高不变imgW = realW;imgH = realH;}$(bigimg).css('width', imgW); //以最终的宽度对图片进行缩放var w = (windowW - imgW) / 2; //计算图片与窗口的左右边距var h = (windowH - imgH) / 2; //计算图片与窗口的上下边距$(innerbox).css({'top': h,'left': w});$(outerbox).fadeIn('fast'); //淡入显示$('body').css('overflow-y', 'hidden'); //隐藏页面滚动条防止滚动缩放图片时影响页面滚动条位置// IE9, Chrome, Safari, Opera  -- 鼠标滚动监听$('#bigimg').on("mousewheel", MouseWheelHandler);// Firefox -- 鼠标滚动监听$('#bigimg').on("DOMMouseScroll", MouseWheelHandler);})$(outerbox).click(function() { //再次点击淡出消失弹窗$(this).fadeOut('fast');// 解绑 鼠标滚轮监听事件$('#bigimg').off("mousewheel");$('#bigimg').off("DOMMouseScroll");// 重置scaling = 1;$('#bigimg').css('transform', 'scale(1)');$('body').css('overflow-y', 'auto');})}// 鼠标滚轮放大缩小function MouseWheelHandler(event) {var type = event.type;if (type == 'DOMMouseScroll' || type == 'mousewheel') {event.delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta / 120 : -(event.detail || 0) / 3;}if (event.delta == 1 || event.delta > 0) { //上滚 -- 放大zoomImg('#bigimg', 'add')} else if (event.delta == -1 || event.delta < 0) { //下滚 -- 缩小zoomImg('#bigimg', 'cut')} else {console.log("鼠标滚轮放大缩小状态获取失败")}}// 缩放图片比例function zoomImg(img, type) {if (type == 'add') {scaling += 0.1;} else {if (scaling < 0.5) { //控制图片缩小到一定大小return}scaling -= 0.1;}$(img).css('transform', `scale(${scaling})`);}
})</script></body>
</html>

图片预览，且鼠标滚轮缩放相关推荐

JS实现图片预览与等比缩放
案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...
js实现移动端图片预览：手势缩放，手势拖动，双击放大...
原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言本文将介绍如何通过js实现移动端图片预览,包括图片的预览模式,手势缩放,手势拖动,双击放大等基本功能: 扫码查看示例效果: ...
h5 img js 点击图片放大_H5实现移动端图片预览：手势缩放，手势拖动，双击放大......
查看示例效果: 一.功能介绍图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
Android 手势检测实战打造支持缩放平移的图片预览效果（下）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39480503,本文出自:[张鸿洋的博客] 上一篇已经带大家实现了自由的放大缩小图 ...
html5 双指缩放图片,js实现移动端图片预览：手势缩放，手势拖动，双击放大......
查看示例效果: 一.功能介绍图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
模仿微信朋友圈图片浏览 js javascript 支持图片预览，滑动切换，双指缩放，图片缓存
模仿微信朋友圈图片浏览 js javascript 支持图片预览,滑动切换,双指缩放,图片缓存 2017年08月10日 12:11:38 阅读数:2311 previewImage-mobile 仿 ...
VUE3 实现前台图片标注添加矩形框、图片放大、缩小、鼠标滚轮缩放
VUE3 实现前台图片标注功能包括: 鼠标左键拖动添加矩形框标记区域,鼠标点击已绘制的矩形: 选中矩形,并绘制不同选中效果: 鼠标在已绘制的矩形中按住左键拖动,选中并移动矩形:选中矩形后鼠标在选中矩 ...
dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件（巨详细）
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
angular中封装fancyBox(图片预览)
首先在官网下载最新版的fancyBox(一定要去最新网站,以前依赖的jquery版本偏低),附上链接:http://fancyapps.com/fancybox/3/ 然后在项目中引用jquery,然 ...

图片预览，且鼠标滚轮缩放

图片预览，且鼠标滚轮缩放

图片预览，且鼠标滚轮缩放相关推荐

最新文章

热门文章