Question

如何在另一个尺寸较大的div上显示图像以显示图像？

我已经尝试了很多次并通过许多逻辑，但经过几个小时的努力工作后，我发布在这里。以下是我的代码：

我需要将较小幻灯片中的点击图像显示为名为largerimage的大型div显示类。

$(document).ready(function(){
    $("img").onclick(function()
    {
        $(".largerimage").show($this);
    });
});

Answer 1

我认为这样做。

＆＃13;

$("img").click(function(){
  $img = $(this).clone();
  $(".largerimage").show().html($img.removeAttr('width'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img width="100" src="http://dummyimage.com/300x200/000/fff"/>
<div class="largerimage"></div>

＆＃13;

Answer 2

试试这个，它可以帮到你

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $('img').click(function(){
          $largeimage = $(this).clone().css({height:"300", width:"300"});
          $(".largerimage").html($largeimage);
        });
      });
    </script>
  </head>
  <body>
    <img width="50" src="C:\Users\buffer\Pictures\a.jpg" />
    <img width="100" src="C:\Users\buffer\Pictures\b.png" />
    <img width="200" src="C:\Users\buffer\Pictures\c.png"/>
    <div class="largerimage"></div>
  </body>
</html>

有三个宽度不等的图像在较大的div中显示为固定宽度。

Answer 3

这有效：

$(document).ready(function(){
  var height1 = $("div.first").height();
  var width1 = $("div.first").width();
  var area1 = height1*width1;
  var height2 = $("div.second").height();
  var width2 = $("div.second").width();
  var area2 = height2*width2;

  if (area1>area2) {
    $("div.first").click(function(){
      $("img").show();
    });
  }
  if (area2>area1) {
    $("div.second").click(function(){
      $("img").show();
    });
  }
});

检查此the wordnet man page

如何在jquery

3 个答案: