jQuery 单击图像全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18545077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image Fullscreen on click
提问by Narendra Singh Rathore
<html>
<head>
<title>
Image Full-Screen On Click.
</title>
</head>
<body>
<div>
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.
我想在用户点击图像时全屏显示，就这么简单，我在网上搜索没有得到正确的答案，因为我不是制作自己的 java 脚本函数的专家，所以这是最好的方法去做吧 。并请提供示例（如果有）。
回答by Juliano
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.
这是我的快速解决方案（不需要 CSS，但如果需要，您可以使用它）。我在我的网站上使用它，它运行良好。
$('img[data-enlargable]').addClass('img-enlargable').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-enlargable width="100" style="cursor: zoom-in" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png" />回答by Saranya Sadhasivam
Give the html as below
给 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>
Write a Javascript function
编写一个 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>
回答by probablyup
Alternatively, you could pop a <div>into the DOM with position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('image.jpg') no-repeat center; background-size: cover;and that would give you an effective full-screen lightbox for your image.
或者，您可以将 a 弹出<div>到 DOM 中position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('image.jpg') no-repeat center; background-size: cover;，这将为您的图像提供一个有效的全屏灯箱。
回答by taki Martillo
Well, friend, the first thing you need is an image to click on your page. You can use jQuery to program against basically any DOM element you can imagine a CSS selector for!
好吧，朋友，您需要的第一件事是在您的页面上单击图像。您可以使用 jQuery 对基本上任何您可以想象的 CSS 选择器的 DOM 元素进行编程！
If it were ME, I would do something like the following:
如果是我，我会做如下的事情：
<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>
I put together a little fiddle for you too: http://jsfiddle.net/wxj4c6yj/1/
我也为你整理了一个小小提琴：http: //jsfiddle.net/wxj4c6yj/1/
Hope this is of some assistance to you.
希望这对你有一些帮助。
