0

我是第一次尝试一些 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>
4

3 回答 3

0

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

于 2011-09-24T08:07:08.577 回答
0

有一个包含两个图像并将其设置position为相对的容器 div。之后，您可以将两个图像放在该 div 中并给它们 id，确保将它们设置position为绝对值，以便它们相互叠加。

于 2011-09-24T08:15:30.583 回答
0

这并不难；）

$(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");
       }); 

    });
});

解释

首先，我们通过 javascript 将 display 属性设置为“none”（所以没有的客户只会看到图像）在fadeIn我们的图像之后，并使用函数fadeOut更改图像 src 。attr

于 2011-09-24T08:16:15.323 回答