首页 > 其他 > 详细

博客图片点击放大

时间:2018-03-08 17:55:18      阅读:206      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!