博客图片点击放大

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>

  

 

posted @ 2018-03-08 17:47  郝格歌  阅读(198)  评论(0编辑  收藏  举报