JS实现遮罩展示图片

一、展示

二、代码

遮罩层重点在：

1，head中的style css样式、

2，body內的mask显示div、

3，script中的js代码。

4，因为这里使用了一点jquery，所以需要在head中引入jquery。(我的jquery-1.11.1.min.js)

脱敏代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<%String path = request.getContextPath();%>
<head>
     <title>zhezhaocengtest</title>

    <!-- js-->
    <script src="<%=path %>/web/Manager/js/jquery-1.11.1.min.js"></script>

    <style>
        /*遮罩层*/
        .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            top:0;
            left: 0;
            display: none;
            background-color: rgba(0, 0, 0, 0.6);
        }
        /*遮罩层显示图片部分*/
        .mask .bigpic{
            width: 400px;
            height: 400px;
            background-color: #fff;
            margin:100px auto;
        }
    </style>
</head>
<body >
<!-- main content start-->

<div class="tables">
    <h2 class="title1" style="margin: 15px">中介</h2>
    <div class="bs-example widget-shadow" data-example-id="hoverable-table">
        <h4>中介列表</h4>

        /*遮罩层显示图片部分start*/
        <div class="mask" id="mask">
            <div class="bigpic" id="bigpic">
                <img style="height: 100%;width: 100%" >
            </div>
        </div>
        /*遮罩层显示图片部分end*/

        <table class="table table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>头像</th>
                <th>微信</th>
            </tr>
            </thead>
            <tbody>

            <c:forEach var="it" items="${list}" varStatus="vs">
                <tr>
                    <th>${vs.count}</th>
                    <td>
                        /*小图img上添加点击事件zhezhao();*/
                        <img onclick="zhezhao();"  src="<%=path %>/upload/${it.pic }" >
                    </td>
                    <td>
                        <img onclick="zhezhao();" src="<%=path %>/web/Agent/images/${it.weixin }" >
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>

</div>

<script>

    //获取遮罩层
     var mask = document.getElementById("mask");

    //遮罩层
    function zhezhao(event) {
        mask.style.display = "block";
        //阻止冒泡
        var event = event||window.event;
        $('#bigpic img').attr("src",event.target.src);
        // alert(event.target.src);
        if (event || event.stopPropagation()){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }

    }

    //遮罩层失效
    document.onclick = function(event){
        event = event || window.event;
        //兼容获取触动事件时被传递过来的对象
        var aaa =event.target?event.target:event.srcElement;
        if (aaa.id != "bigpic"){
            mask.style.display = "none";
        }
    }
</script>
</body>
</html>

摘自：(5条消息) 【js】使用js实现遮罩层_Evan_QB的博客-CSDN博客_js 遮罩层

JS实现遮罩展示图片

一、展示

二、代码

相关文章