首页 > Web开发 > 详细

自定制js图片放大插件

时间:2020-07-09 13:21:09      阅读:69      评论:0      收藏:0      [点我收藏+]

例子一 

效果

技术分享图片

鼠标移动上去放大

<div>
<img class="enlarge" width="80" height="80" src="https://img14.360buyimg.com/n0/jfs/t1/134958/22/4022/196092/5f05e5dbE543b1f3d/cced1c5e2247d9ab.jpg">
</div>
<script>
$(.enlarge).hover(function () {
        let link = $(this).attr("src");
        let img = `<div class="enlarge-body" style="position:fixed;top:20%;left:38%;width:450px;height:450px;border-radius:10px;z-index:1000;-moz-box-shadow:-1px 1px 9px #333333; -webkit-box-shadow:-1px 1px 9px #333333; box-shadow:-1px 1px 9px #333333;"><img src="${link}" style="width:100%;height:100%;border-radius:10px;"></div>`
        $("body").append(img);
    }, function () {
        $(".enlarge-body").remove();
    });
</script>

例子二

效果

技术分享图片

鼠标点击放大

<div class=content>
    <div><img class="enlarge" width="80" height="80" src="https://img14.360buyimg.com/n0/jfs/t1/134958/22/4022/196092/5f05e5dbE543b1f3d/cced1c5e2247d9ab.jpg"></div>
</div>
<script>
   $(".content").on("click", ".enlarge", function () {
        let link = $(this).attr("src");
        let img = `<div class="enlarge-body" style="position:fixed;top:20%;left:38%;width:450px;height:450px;border-radius:10px;z-index:1000;-moz-box-shadow:-1px 1px 9px #333333; -webkit-box-shadow:-1px 1px 9px #333333; box-shadow:-1px 1px 9px #333333;"><button class="close-img" style="cursor:pointer;position: absolute;top:-10px;right:-10px;border-radius:50%;border:1px solid #aaa;width: 20px;height:20px;">x</button><img src="${link}" style="width:100%;height:100%;border-radius:10px;"></div>`;
        $("body").append(img);
    });
    $("body").on("click", ".close-img", function () {
        $(this).parent().remove();
    });
</script>

注意:这个依赖 jquery

自定制js图片放大插件

原文:https://www.cnblogs.com/taozhengquan/p/13272970.html

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