jQuery在不同的页面上使用不同的图像

jQuery fadeIn with different image on different pages

本文关键字：图像 jQuery      更新时间：2023-09-26

我试图得到一个不同的图像在同一个地方褪色，但在不同的页面。例如，我的#header是一个DIV标签，我在其中放置了一个#logo DIV标签来保存我的logo图像(我想要淡入)。

现在我可以通过给每个页面的body标签一个ID，在每个页面的#logo DIV中加载一个不同的图像，但是我不能为我的生活弄清楚如何让jQuery在这些图像中褪色。

这就是我希望比我更聪明的人能帮助我解决这个问题的地方。

我对html和CSS略知一二，对编程和jQuery却知之甚少。我正试着读完《Javascript &jQuery丢失手册》这本书，但到目前为止它还没有给我很大的帮助。

谢谢你的帮助。

下面是我代码中的内容(如它是)。我不知道如何"选择"我想使用的图像，然后将fadeIn函数应用到它们。

对不起，我还没有被允许上传照片，这是我目前为止所有的照片-不多。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="_CSS/siteWide.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="_jquery-1.7.1.min.js"></script>
<script>
$(function() {
$('#index #logo').fadeIn(4000); 
});
</script>
</head>
<body>
<body id="index"><!--/*allows for different images in different headers--> 
<div id="wrapper">
  <div id="header">
  <div id="logo"></div>
  </div>
  <div id="mainContent">
  </div>
  <div id="sideBar">
    <ul>
      <li><a href="politics.html">Politics</a></li>
      <li><a href="Religion.html">Religion</a></li>
      <li><a href="Health.html">Health</a></li>
      <li><a href="Things That Bug Me.html">Bug me</a></li>
      <li><a href="Other.html">other</a></li>
    </ul>    
  </div>
  <div id="footer">Content for  id "footer" Goes Here</div>
Content for  id "wrapper" Goes Here</div>
</body>
</html>

这是我最近在一个项目中使用的一些代码。如果你不关心什么图片在哪个页面上加载，只是有一堆随机的图片，你可以尝试这样做:

Html: 

<div class="visual">
   <img src="..." style="display: none;/> 
   <img src="..." style="display: none;/> 
   <img src="..." style="display: none;/> 
</div>

然后你可以使用这个jQuery让其中一个图像随机淡出:

$(document).ready(function(){
   var size= $('.visual').find('img').length;
   var counter=Math.floor(Math.random()*size);
   $('.visual').find('img').eq(counter).fadeIn(1000);
});

如果你只是想在你已经得到你的代码/css工作的图像褪色，你应该尝试使用fadeIn()函数。

$('#logo').fadeIn('1000'); //the number is how long it takes to fade in...

请注意，您将希望在css中设置#logo{ display: none; }

为每个页面设置不同的索引集，这些索引集将链接到特定的图像。下面我有一个'id'属性的索引元素。例如在page1中你可以这样设置索引元素

<div id="index" pageId="first"></div>

第二页:

<div id="index" pageId="second"></div>

等等，在你的HTML。然后你的javascript是这样的:

var yourPageId = $('#index').attr('pageId');
$('#logo').hide();
switch(yourpageId){
case "first":
  $('#logo').attr('src',"images/yourFirstImage.jpg");
  break;
case "second":
  $('#logo').attr('src',"images/yourSecondImage.jpg");
  break;
default:
  alert("Uh Oh ID is not set or matched);
}
$('#logo').fadeIn();

在本例中，请确保#logo元素是一个img元素:

<img id="logo" src="" />

或者如果你设置为:

  <div id="logo"> <img /> </div>

那么你就需要调整哪个元素在设置源以及哪个元素想要淡出

相关文章：