图片放大查看

最新推荐文章于 2022-03-01 20:07:11 发布

原创最新推荐文章于 2022-03-01 20:07:11 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #jquery

这篇博客详细介绍了如何使用JavaScript和layer库来实现在网页中点击图片后弹出一个全屏显示图片的窗口，同时展示了如何设置层叠效果和关闭回调功能。通过这段代码，可以为网站增添交互性，提升用户体验。

                    
<img class="imgs" src="路径" style="width:100px;float:left">

                          

    $(".imgs").click(function(){
        var img_url=$(this).attr('src');
        layer.open({
            type: 1,
            shade: false,
            //area:["800px","600px"],
            title: false, //不显示标题
            content:"<img style='width:100%;height:100%' src='"+img_url+"'>", //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function(){
                // layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
            }
        });
    });