<html>
<head>
<title>
Image Full-Screen On Click.
</title>
</head>
<body>
<div>
我想在用户点击图像时使图像全屏显示，就这么简单，我在网上搜索没有得到正确的答案，因为我不是制作自己的java脚本函数来做到这一点的专家，所以哪个是最好的办法。 并请提供示例（如果有）。
这是我的快速解决方案（不需要 CSS，但如果需要，您可以调整它）。 我在我的网站上使用这个，效果很好。
$('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" />给出如下的html
<html>
<head>
<title>Image Full-Screen On Click.</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input id="clickbutton" type="button" value="Click" onclick="showimage()" />
</body>
</html>
编写 Javascript 函数
<script type="text/javascript">
function showimage()
{
$("body").css("background-image","url('images/test.png')"); // Onclick of button the background image of body will be test here. Give the image path in url
$('#clickbutton').hide(); //This will hide the button specified in html
}
</script>
或者，您可以使用
<div>position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('image.jpg') no-repeat center; background-size: cover;好吧，朋友，您需要的第一件事就是在您的页面上单击图像。您可以使用 jQuery 对任何您能想象到 CSS 选择器的 DOM 元素进行编程！
如果是我，我会做以下事情：
<html>
<head>
<title>My Full-Screen Image Clicker</title>
<script src = "Scripts/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
//your code for stuff should go here
$('#Fullscreen').css('height', $(document).outerWidth() + 'px');
//for when you click on an image
$('.myImg').click(function(){
var src = $(this).attr('src'); //get the source attribute of the clicked image
$('#Fullscreen img').attr('src', src); //assign it to the tag for your fullscreen div
$('#Fullscreen').fadeIn();
});
$('#Fullscreen').click(function(){
$(this).fadeOut(); //this will hide the fullscreen div if you click away from the image.
});
});
</script>
<style>
#MainImages {
width: 100%;
height: 800px;
}
#MainImages img {
cursor: pointer;
height: 70%;
}
#Fullscreen {
width: 100%;
display: none;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
/* I made a 50% opacity black tile background for this
div so it would seem more... modal-y*/
background: transparent url('../Images/bgTile_black50.png') repeat;
}
#Fullscreen img {
display: block;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="MainImages">
<img src="Images/img.jpg" alt="" class="myImg" />
</div>
<div id="Fullscreen">
<img src="" alt="" />
</div>
</body>
</html>
我也为你整理了一些小提琴：http://jsfiddle.net/wxj4c6yj/1/
希望这对您有帮助。
$("img").on("click", function () {
this.requestFullscreen();
});