LayUI 图片预览功能

1.jquery版本3.2.1(以下程序适用于1.7版本以上)

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

2.HTML代码

<script>
	// 鼠标移至图片上方,鼠标样式变为手状态
    $("ul").on("mouseover", "img", function() {
        this.style.cursor = "pointer";
    });

    // 图片点击预览,ul为父类元素,img为已存在元素或者未来生成元素
    $("ul").on("click","img", function () {
        clickPicture(this);
    });

    // 点击图片放大预览
    function clickPicture(obj) {
        var img = new Image();
        img.src = obj.src;
        img.onload = function (ev) {
            // 获取图片高度
            var height = this.height;
            // 获取图片宽度
            var width = this.width;
            // 图片URL地址
            var imgHtml = "<img style='height: 100%;width: 100%' src='" + obj.src + "' />";
            // 图片显示面积,前参数为宽,后参数为高
            var area = [];
            if (height <= 747 && width <= 1680) {
                area = [width + 'px', height + 'px'];
            } else if (height > 747 && width <= 1680) {
                area = [width + 'px', 747 + 'px'];
            } else if (height <= 747 && width > 1680) {
                area = [1680 +'px', height + 'px'];
            } else {
                area = [1680 + 'px', 747 + 'px'];
            }
            //弹出层
            top.layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: area,
                shadeClose: true,//点击外围关闭弹窗
                scrollbar: false,//不显示滚动条
                title: false, //不显示标题
                content: imgHtml, //捕获的元素
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        };
    }
</script>

3.效果

①原缩略图

②点击缩略图后按屏幕显示范围放大,如果超出范围显示滚动条