jquery - 点击图片全屏

Question

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

我想在用户单击它时使图像全屏显示，就这么简单，我在网上搜索没有得到正确的答案，因为我不是制作自己的 java 脚本函数的专家，所以这是最好的方法去做吧。如果有，请提供示例。

score 48 · Accepted Answer

这是我的快速解决方案（不需要 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" />

score 5 · Accepted Answer

给出如下的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>

score 5 · Accepted Answer

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

score 4 · Accepted Answer

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

希望这对您有所帮助。

jquery - 点击图片全屏

4 回答 4

Related

Reference