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").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;
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 () {
}
});
};
}
</script>
3.效果
①原缩略图
②点击缩略图后按屏幕显示范围放大,如果超出范围显示滚动条