이미지 클릭에되는 전체 화면

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

이미지 클릭에되는 전체 화면

나는 이미지를 전체 화면을 만들고 싶어

때에 사용자가 클릭, 그와 같은 단순한, 내가 같이 더 적절한 답을 얻고 웹을 검색하지가 나는 그것을 할 수있는 가장 좋은 방법입니다, 그래서 내 자신의 자바 스크립트 기능을 할 전문가가 아니에요. 및 예 (있는 경우)를 제공해주십시오.

출처

2013-08-31 Narendra Singh Rathore

Jquery (http://jquery.com/), HTML (http://www.w3schools.com/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>

이

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

출처

2013-08-31 06:31:36

짧은 질문, 짧은 대답! 하하, 훌륭해! –

ㅎ ... 그게 그 남자가하려고하는 것이 확실하지 않습니다. 영리합니다. –

또는 자바 스크립트 함수를 작성 아래로 HTML을주고, 당신은 position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('image.jpg') no-repeat center; background-size: cover;와 DOM에 <div> 팝업 수 있고 그것은 당신에게 효과적인 전체 화면 라이트 박스를 줄 것이다 귀하의 이미지.

출처

2013-08-31 07:01:53 probablyup

글쎄, 친구, 가장 먼저 필요한 것은 페이지를 클릭하는 이미지입니다. 기본적으로 CSS 선택기를 상상할 수있는 모든 DOM 요소에 대해 jQuery를 사용하여 프로그래밍 할 수 있습니다! 이 ME라면

, 나는 다음과 같은 일을 할 것입니다 :

<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-05 18:46:23

이미지 클릭에되는 전체 화면

답변

관련 문제