【四二学堂】图片点击查看大图，再点击取消查看，不用框架

最新推荐文章于 2022-02-24 15:26:41 发布

刘横川

最新推荐文章于 2022-02-24 15:26:41 发布

阅读量199

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_38187437/article/details/85122726

版权

web 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
    $(function(){
        
        //layer.msg("玩命提示中");
        if("${message}" != null && "${message}" != ''){
            var msg = "${message}";
            layer.alert(msg, {
                skin: 'layui-layer-lan'
                ,closeBtn: 0
                ,anim: 4 //动画类型
            })
        }

        $(".view").click(function(){
            var _this = $(this);//将当前的pimg元素作为_this传入函数
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        });

    });

    function imgShow(outerdiv, innerdiv, bigimg, _this){
        var src = _this.attr("src");
        $(bigimg).attr("src", 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});
            $(outerdiv).fadeIn("fast");
        });

        $(outerdiv).click(function(){
            $(this).fadeOut("fast");
        });
    }
 
</script>

<body>
<div class="content">
	<h3 style="margin-left: 135px">产品详情图</h3>

	<div class="masonry">
		<c:forEach items="${device.detailsimgList}" var="other">
			<c:if test="${other != null and other != '' }">
				<div ><img class="view" style="width: 100%" src="<%=path%>${other}"/></div>	//图片路径 记得加class ='view'
			</c:if>
		</c:forEach>
	</div>
    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>

</body>

刘横川

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【四二学堂】图片点击查看大图，再点击取消查看，不用框架

&lt;script type="text/javascript"&gt; $(function(){ //layer.msg("玩命提示中"); if("${message}" != null &amp;&amp; "${message}" != ''){ var msg = "${message}&qu
复制链接

扫一扫

专栏目录