博客图片点击放大

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>

　　

 

转载于:https://www.cnblogs.com/angrybb/p/8529877.html