Question

<html>
<head>
<title>
Image Full-Screen  On Click.
</title>
</head>
<body>
<div>

我想在用户点击它时使图像全屏，就这么简单，我搜索网络没有得到正确的答案，因为我不是专家制作我自己的java脚本功能来做到这一点，所以哪个是最好的方法。如果有的话请提供示例。

Answer 1

将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>

Answer 2

好吧，朋友，你需要的第一件事是点击你的页面的图像。您可以使用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/

希望这对你有所帮助。

Answer 3

或者，您可以使用<div>将position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('image.jpg') no-repeat center; background-size: cover;弹出到DOM中，这样可以为您的图像提供有效的全屏灯箱。

Answer 4

这是我的快速解决方案（不需要CSS，但如果需要，可以调整它）。我在我的网站上使用它运行良好。

＆＃13;

$('img[data-enlargable]').addClass('img-enlargable').click(function(){
    var src = $(this).attr('src');
    $('<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(){
        $(this).remove();
    }).appendTo('body');
});

＆＃13;

<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" />

＆＃13;

单击图像全屏

4 个答案: