Question

我第一次尝试了一些jQuery。我的第一个目标是让页面上的一个图像淡入不同的图像。我已经弄清楚如何使用几个div将背景图像设置为不同的图像文件（参见下面的代码）。但是，如果我以某种方式对现有的img标签执行此操作而不是使用某些div，这对我的情况会更好。有没有办法做这个代码的功能，但使用img标签？

<html>
  <head>
    <script type="text/javascript" src="jquery-1.6.4.js"></script>
    <script type="text/javascript">
      $(function() {
          $("#imgblock2").delay(3000).fadeIn(3000);
      });

    </script>
    <style type="text/css">
      #imgblock {
        background-image:url("frame.jpg");
        width:240;
        height:320;
        position:absolute;
        top:0;
        left:0;
      }
      #imgblock2 {
        background-image:url("average.jpg");
        width:240;
        height:320;
        position:absolute;
        top:0;
        left:0;
        display:none;
      }
    </style>

  </head>
  <body>
    <div id="imgblock"></div>
    <div id="imgblock2"></div>
  </body>
</html>

Answer 1

是的，使用实际图像而不是div。你也给了图像id。

Answer 2

让容器div包含两个图像并将其position设置为相对。之后，您可以将两个图像放在该div中并给它们ID，请务必将它们position设置为绝对值，以便它们相互叠加。

Answer 3

This is not that hard ;)

$(document).ready(function() {
   var relatedImg =  $("#imgblock");

   relatedImg.css("display", "none");
   relatedImg.fadeIn("slow", function(){
       relatedImg.fadeOut("slow", function(){
           relatedImg.attr("src", "http://farm6.static.flickr.com/5221/5592275221_8190eb9b9c.jpg");
           relatedImg.fadeIn("slow");
       }); 

    });
});

<强>解释

首先，我们在fadeIn我们fadeOut我们的图片之后，通过javascript将显示属性设置为“无”（所以客户没有看到图片），并使用{更改图片src {1}}功能。

如何使用<img/>标签而不是使用jQuery的<div>来淡化图像？</div>

3 个答案: