博客图片点击放大

Posted 2020-10-26 郝格歌

1. 进入博客，点击管理——》设置——》申请支持JS代码权限；

 

2. 支持JS代码后，在页脚html代码中粘贴如下代码：

<div id="shadediv" style="display: none;position: fixed;z-index: 1000;top: 0;left: 0;
    width: 100%;height: 100%;background-color: rgba(255,255,255,.8);">
    <img id="bigimg" style="border: 0;position: absolute;left: 50%;top: 50%;
    transform: translate(-50%,-50%); src="" />
</div>

　　

<script type="text/javascript">
    $("img").mouseover(function(){
        $(this).css("cursor","pointer");
    });

    $("img").click(function(){
        var src = $(this).attr("src");
        $(\'#shadediv\').fadeIn();
        $(\'#bigimg\').attr("src", src);

        $("#bigimg").mouseover(function(){
            $(this).css("cursor","pointer");
        });
        $(\'#shadediv\').click(function(){
            $(this).fadeOut();
        });
    });
</script>