<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>
【讨论】：
或者，您可以使用position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('image.jpg') no-repeat center; background-size: cover; 将<div> 弹出到DOM 中，这将为您的图像提供一个有效的全屏灯箱。
【讨论】：
好吧，朋友，您需要的第一件事是在您的页面上点击图片。您可以使用 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/
希望对您有所帮助。
【讨论】：