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

ユーザーがクリックしたときに画像を全画面表示にしたいのですが、それと同じように簡単です。適切な答えが得られないWebを検索しました.それをするために 。例があれば教えてください。

4

4 に答える 4

5

あるいは、 and を<div>使用して DOM にポップすることもできます。これposition: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('image.jpg') no-repeat center; background-size: cover;により、画像の効果的なフルスクリーン ライトボックスが得られます。

于 2013-08-31T07:01:53.473 に答える
4

さて、あなたが最初に必要とするのは、あなたのページでクリックするための画像です. 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/

これがあなたの助けになることを願っています。

于 2015-08-05T18:46:23.003 に答える