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

最新推荐文章于 2020-11-08 00:40:31 发布

河上街

最新推荐文章于 2020-11-08 00:40:31 发布

阅读量751

点赞数

文章标签：后台图片预览

本文链接：https://blog.csdn.net/liujucai/article/details/102753057

版权

<!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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现后台图片预览（放大缩小）

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>查看项目部信息</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA...
复制链接

扫一扫