Javascript 单击时弹出HTML图像_Javascript_Html_Css

Javascript 单击时弹出HTML图像

javascript html css

Javascript 单击时弹出HTML图像,javascript,html,css,Javascript,Html,Css,嗨，我在一个网站上有一些图片，我正在创建，请不要在我学习的过程中。我希望用户能够点击图像并查看完整的图像弹出窗口，因此像实际图像的原始大小一样，我为下面的图片添加了代码 <section id="main"> <div class="inner"> <section> <div class="box alt"> <div class="row 50% uniform">

嗨，我在一个网站上有一些图片，我正在创建，请不要在我学习的过程中。我希望用户能够点击图像并查看完整的图像弹出窗口，因此像实际图像的原始大小一样，我为下面的图片添加了代码

<section id="main">
          <div class="inner">
            <section>

<div class="box alt">
      <div class="row 50% uniform">

                              <div class="4u"><span class="image fit"><img 
src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>

                                <div class="4u"><span class="image fit"><img 
src="images/marble/2.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
                                <div class="4u"><span class="image fit"><img 
src="images/marble/3.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>

    </div>
              </div>
</section>

            </div>
        </section>

要实现此功能，您需要学习一些Javascript或jquery

我认为下面的代码将满足您的需要

<html>
<head>
<meta charset="utf-8"/>
<script>
function show_img(obj) {
    var img_src = obj.getAttribute("src");
    document.getElementById("full_screen").style.display = "block";
    document.getElementById("img_explore").innerHTML = "<img src="+img_src+">";
}
</script>
</head>
<body>
<style>
#full_screen {position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
#full_screen img {position:absolute; width:100%; height:100%;}
#close {position:absolute; background:rgba(0,0,0,0.6); width:100%; text-align:right; color:#fff; z-index:10;}
        </style>
<div id="full_screen">
<div id="close" onclick="document.getElementById('full_screen').style.display = 'none';">Close</div>
<div id="img_explore"></div>
</div>
<section id="main">
          <div class="inner">
            <section>

<div class="box alt">
      <div class="row 50% uniform">

                              <div class="4u"><span class="image fit"><img 
src="editor-photo-landing-image-v1.jpg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3>
</span></div>

                                <div class="4u"><span class="image fit"><img 
src="food-restaurant-kitchen-meat-23086.jpg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3>
</span></div>
                                <div class="4u"><span class="image fit"><img 
src="pexels-photo-167890.jpeg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3>
</span></div>

    </div>
              </div>
</section>

            </div>
        </section>
</body>
</html>

span元素应完全删除，其类应放在图像元素本身上

此外，您还有一个嵌套的section元素，它对您没有任何帮助

最后，不要使用HTML标题元素。。。因为他们的文字风格。格式化是CSS的工作。与其使用标题，不如使用Fig和figcaption元素围绕每个图像及其附带的文本

img{ 宽度：200px；边框：1px纯黑；/*此选项仅用于测试目的*/ } .缩略图：悬停{ 宽度：500px；高度：自动；位置：相对位置； /*将图像向右推1/2屏幕宽度和1/2图像宽度*/ 左边距：calc50%-250px； } 大理石大理石大理石我已经采取并适应了点击，这是你最初的要求

主要区别在于添加了一个标签，该标签针对页面上的元素，并在css中使用：target

img{ 宽度：200px；边框：1px纯黑；/*此选项仅用于测试目的*/ } .缩略图：目标{ 宽度：500px；高度：自动；位置：相对位置； /*将图像向右推1/2屏幕宽度和1/2图像宽度*/ 左边距：calc50%-250px； } 大理石大理石大理石

看看这个。请阅读我们的页面，了解如何改进您的问题。伟大的问题往往会从社区中产生更快、更好的答案。你需要每个图像有两个版本：小缩略图和全尺寸图像。但是，我们不是一个代码编写服务。您必须试一试，然后带着您遇到的任何特定编程问题返回。您可以在较小的页面上绕一圈，直接链接到图像，或者更好地链接到以图像为中心的页面，因为某些浏览器不会自动执行此操作。@ScottMarcus我添加了用于悬停的代码，有没有可能让它悬停在所有其他图像上？目前，它在所有其他图像下徘徊

<html>
<head>
<meta charset="utf-8"/>
<script>
function show_img(obj) {
    var img_src = obj.getAttribute("src");
    document.getElementById("full_screen").style.display = "block";
    document.getElementById("img_explore").innerHTML = "<img src="+img_src+">";
}
</script>
</head>
<body>
<style>
#full_screen {position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
#full_screen img {position:absolute; width:100%; height:100%;}
#close {position:absolute; background:rgba(0,0,0,0.6); width:100%; text-align:right; color:#fff; z-index:10;}
        </style>
<div id="full_screen">
<div id="close" onclick="document.getElementById('full_screen').style.display = 'none';">Close</div>
<div id="img_explore"></div>
</div>
<section id="main">
          <div class="inner">
            <section>

<div class="box alt">
      <div class="row 50% uniform">

                              <div class="4u"><span class="image fit"><img 
src="editor-photo-landing-image-v1.jpg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3>
</span></div>

                                <div class="4u"><span class="image fit"><img 
src="food-restaurant-kitchen-meat-23086.jpg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3>
</span></div>
                                <div class="4u"><span class="image fit"><img 
src="pexels-photo-167890.jpeg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3>
</span></div>

    </div>
              </div>
</section>

            </div>
        </section>
</body>
</html>