单击全屏图片 [英] Image Fullscreen on click
本文介绍了单击全屏图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<html>
<head>
<title>
Image Full-Screen On Click.
</title>
</head>
<body>
<div>
我想在用户单击图像时将其全屏显示，就这么简单，我没有在网络上搜索到正确的答案，因为我不擅长制作自己的Java脚本函数来执行该操作，所以最好的方法是做到这一点.并请提供示例(如果有).
I want to make image full-screen when user click on it ,just simple as that ,i have search the web no getting proper answer, as i am not expert to make my own java script function to do it , So which is best way to do it . and Please provide example if any.
推荐答案
这是我的快速解决方案(不需要CSS，但可以根据需要进行调整).我正在我的网站上使用它，效果很好.
Here is my quick solution (no CSS needed, but you can tweek it if you need). I'm using in my website and it works well.
$('img[data-enlargeable]').addClass('img-enlargeable').click(function() {
var src = $(this).attr('src');
var modal;
function removeModal() {
modal.remove();
$('body').off('keyup.modal-close');
}
modal = $('<div>').css({
background: 'RGBA(0,0,0,.5) url(' + src + ') no-repeat center',
backgroundSize: 'contain',
width: '100%',
height: '100%',
position: 'fixed',
zIndex: '10000',
top: '0',
left: '0',
cursor: 'zoom-out'
}).click(function() {
removeModal();
}).appendTo('body');
//handling ESC
$('body').on('keyup.modal-close', function(e) {
if (e.key === 'Escape') {
removeModal();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img data-enlargeable width="100" style="cursor: zoom-in" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png" />这篇关于单击全屏图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
