码迷,mamicode.com
首页 > 其他好文 > 详细

博客图片点击放大

时间:2018-03-08 18:07:34      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:申请   top   style   fun   gpo   none   分享   position   blog   

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>

  

 

博客图片点击放大

标签:申请   top   style   fun   gpo   none   分享   position   blog   

原文地址:https://www.cnblogs.com/angrybb/p/8529877.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!