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"%>


<%String path = request.getContextPath();%>

     

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

    





    
中介
    

        
中介列表

        /*遮罩层显示图片部分start*/
        

            

                
            
        
        /*遮罩层显示图片部分end*/

        var="it" items="${list}" varStatus="vs">
                

            

            

                
#
                
头像
                
微信
            
            
            


            

                    
${vs.count}
                    

                        /*小图img上添加点击事件zhezhao();*/
                        
                    
                    

                        
                    
                
            
            
        
    



<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>

    

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