实现后台图片预览（放大缩小）

向右看齐 2023-06-10 06:24 5阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>查看项目部信息</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css"  media="all">
        <link rel="stylesheet" type="text/css" href="${ctxPath}/static/css/createproject/style1.css"/>
        <link rel="stylesheet" type="text/css" href="${ctxPath}/static/css/createproject/bootstrap.css"/>
        <script src="${ctxPath}/static/js/jquery.min.js"></script>
        <script src="${ctxPath}/static/js/createproject/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="${ctxPath}/static/js/createproject/bootbox.min.js"></script>
        <link rel="stylesheet" media="screen" href="${ctxPath}/static/css/createproject/PROJECT_background.css">
        <script src="${ctxPath}/static/js/createproject/vue.js"></script>
        <style type="text/css">
      
        .bigimg{width:600px;position: fixed;left: 0;top: 0; right: 0;bottom: 0;margin:auto;display: none;z-index:9999;border: 10px solid #fff;}
        .mask{position: fixed;left: 0;top: 0; right: 0;bottom: 0;background-color: #000;opacity:0.5;filter: Alpha(opacity=50);z-index: 98;transition:all 1s;display: none}
        /*.bigbox{width:840px;background: #fff;border:1px solid #ededed;margin:0 auto;border-radius: 10px;overflow: hidden;padding:10px;}*/
        .bigbox>.imgbox{width:400px;height:250px;float:left;border-radius:5px;overflow: hidden;margin: 0 10px 10px 10px;}
        .bigbox>.imgbox>img{width:100%;}
        .imgbox:hover{cursor:zoom-in}
        .mask:hover{cursor:zoom-out}
        .mask>img{position: fixed;right:10px;top: 10px;width: 60px;}
        .mask>img:hover{cursor:pointer}
        .a{
        cursor:pointer;
        margin-left: 8px;
        font-size: 14px;
        }
        </style>
        <script>
        $(function(){
        /*
         smallimg   // 小图
         bigimg  //点击放大的图片
         mask   //黑色遮罩
         */
            var obj = new zoom('mask', 'bigimg','smallimg');
            obj.init();
        })
        </script>
    
          </head>
    <body  >
    <div  id="particles-js" style="display: flex;align-items: center;justify-content: center"></div>

<div id="main">

<div class="layui-upload">
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="imgbox" id="demo2" ><img src="${ctxPath}/static/image/tongzhi.jpg"  class="smallimg" alt=""           style="width:150px;height:150px"></div>
        </blockquote>
    </div>

</div>

<script src="${ctxPath}/static/js/createproject/zoom.js"></script>

<img src="" alt="" class="bigimg" >
    <div class="mask">
        <img src="${ctxPath}/static/image/close.png" alt="">
    </div>

</body>
    </html>

zoom.js文件

function zoom(mask, bigimg, smallimg) {
    	this.bigimg = bigimg;
    	this.smallimg = smallimg;
    	this.mask = mask
    }
    zoom.prototype = {
    	init: function() {
    		var that = this;
    		this.smallimgClick();
    		this.maskClick();
    		this.mouseWheel()
    	},
    	smallimgClick: function() {
    		var that = this;
    		$("." + that.smallimg).click(function() {
    			$("." + that.bigimg).css({
    				height: $("." + that.smallimg).height() * 4.5,
    				width: $("." + that.smallimg).width() * 4.5
    			});
    			$("." + that.mask).fadeIn();
    			$("." + that.bigimg).attr("src", $(this).attr("src")).fadeIn()
    		})
    	},
    	maskClick: function() {
    		var that = this;
    		$("." + that.mask).click(function() {
    			$("." + that.bigimg).fadeOut();
    			$("." + that.mask).fadeOut()
    		})
    	},
    	mouseWheel: function() {
    		function mousewheel(obj, upfun, downfun) {
    			if(document.attachEvent) {
    				obj.attachEvent("onmousewheel", scrollFn)
    			} else {
    				if(document.addEventListener) {
    					obj.addEventListener("mousewheel", scrollFn, false);
    					obj.addEventListener("DOMMouseScroll", scrollFn, false)
    				}
    			}
    
    			function scrollFn(e) {
    				var ev = e || window.event;
    				var dir = ev.wheelDelta || ev.detail;
    				if(ev.preventDefault) {
    					ev.preventDefault()
    				} else {
    					ev.returnValue = false
    				}
    				//alert(dir)
    				if(dir == -3 || dir == 150|| dir == 120) {
    					upfun()
    				} else {
    					downfun()
    				}
    			}
    		}
    		var that = this;
    		mousewheel($("." + that.bigimg)[0], function() {
    			if($("." + that.bigimg).innerWidth() > $("body").width() - 20) {
    				alert("不能再放大了");
    				return
    			}
    			if($("." + that.bigimg).innerHeight() > $("body").height() - 50) {
    				alert("不能再放大");
    				return
    			}
    			//console.log($("." + that.bigimg).innerHeight()+"aaa"+$("." + that.bigimg).innerWidth())
    			var zoomHeight =($("." + that.bigimg).innerHeight()+20)  * 1.05;
    			var zoomWidth =($("." + that.bigimg).innerWidth()+20)  * 1.05;
               // console.log(zoomHeight+"aaa1111----"+zoomWidth)
    			$("." + that.bigimg).css({
    				height: zoomHeight + "px",
    				width: zoomWidth + "px"
    			})
    		}, function() {
    			if($("." + that.bigimg).innerWidth() < 100) {
    				alert("不能再缩小了哦！");
    				return
    			}
    			if($("." + that.bigimg).innerHeight() < 100) {
    				alert("不能再缩小了哦！");
    				return
    			}
    			var zoomHeight = $("." + that.bigimg).innerHeight() / 1.03;
    			var zoomWidth = $("." + that.bigimg).innerWidth() / 1.03;
    			$("." + that.bigimg).css({
    				height: zoomHeight + "px",
    				width: zoomWidth + "px"
    			})
    		})
    	}
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关实现后台图片预览（放大缩小）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

向右看齐/ 2023年06月10日 06:24/ 0 赞/ 6 阅读

相关【VUE】图片预览放大缩小插件

在看项目时，突然看到预览图片的弹窗，感觉好僵硬，不能放大，不能切换，于是便在网上找下关于图片预览的插件，有找到三个插件，具体的优劣势的看自己的使用吧，我目前只是在电脑查看效果，

古城微笑少年丶/ 2023年05月29日 11:58/ 0 赞/ 9 阅读

相关 Vue实现图片预览（放大缩小拖拽）纯手写

这张图是显示的图片放大的一个预览情况，这里是参考预览操作实现的一个背景为黑色的部分，上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大，代码是基于Ant Design V

快来打我*/ 2023年01月18日 04:03/ 0 赞/ 430 阅读

相关 vue 图片旋转放大缩小

data： deg:90, scale:0 methods: rotate(type){ if(type ==

缺乏、安全感/ 2022年12月17日 12:53/ 0 赞/ 251 阅读

相关 JQ实现图片预览（轮播，放大缩小，拖拽，ajax请求，旋转）

jQuery实现图片预览（功能包括：ajax请求数据、弹出关闭蒙层、轮播、点击放大缩小、鼠标滚动放大缩小、键盘上下键放大缩小、旋转、拖拽），新手注意图标、bootstrop和j

我会带着你远行/ 2022年12月10日 15:54/ 0 赞/ 512 阅读

相关 Chrome 扩展程序——Imagus：图片放大预览工具

主要介绍 Imagus 的功能及应用，Imagus 是一款简单实用的图片放大预览工具。主要功能 Imagus 的功能非常单一，就是在浏览网页时，当鼠标悬停到一张图片后

川长思鸟来/ 2022年06月09日 00:42/ 0 赞/ 376 阅读

相关在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用

在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用：cropbox.js 是一个实现了图像在线剪裁的 jQuery 、YUI 插件和 JavaScript 库

分手后的思念是犯贱/ 2022年06月05日 04:53/ 0 赞/ 327 阅读

相关移动端怎么预览图片放大缩小之 vue2-preview

Why 本期企业微信版想实现图片放大缩小预览，图片内容来自于第三方（此处为后台接口，前后端分离）。类似朋友圈图片预览 How 在网上找了很多图片预览插件，但是好多都不太符

分手后的思念是犯贱/ 2022年01月20日 05:17/ 1 赞/ 1184 阅读

相关 css图片放大缩小

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

淩亂°似流年/ 2021年09月02日 04:26/ 0 赞/ 556 阅读

相关 JS图片放大缩小

HTML部分代码 <img class="alert_img" onmousewheel="return suofang(this)" style="max-widt

我就是我/ 2021年08月29日 19:30/ 0 赞/ 597 阅读