jQuery淡入在不同的页面上的不同图像

我想获得不同的图像淡入在相同的地方，但在不同的页面。因此，例如，我的#header是一个DIV标签，我在其中放置了一个#logo DIV标签以保存我的徽标图像（我想淡入淡出）。jQuery淡入在不同的页面上的不同图像

现在，我可以通过为每个页面的body标签添加一个ID来获取不同的图像以加载每个带CSS的页面上的#logo DIV - 但我无法为我的生活弄清楚如何让jQuery淡入这些图像。

这是我希望比我的更好的头脑可以帮助我弄清楚这一点。

我对HTML和CSS了解甚少，对编程和jQuery了解甚少。我正在尝试通过JavaScript & jQuery Missing Manual book，但迄今为止它还没有得到很大的帮助。

感谢任何帮助。

下面是我在我的代码（如它是）。我无法弄清楚如何“选择”我想要使用的图像，然后将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>

来源

2011-12-13 TONY BENJAMIN

因此，您为每个页面设置了不同的索引集，它将链接到某个图像。下面我让你的索引元素具有'id'属性。因此，例如，第一页上，您将设置索引元素，像这样：

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

和第二页：

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

等等等等，在你的HTML。那么你的JavaScript是像这样：

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

，或者如果你有它设置了像其他：

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

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元素确认

然后你将不得不调整哪个元素设置源和你想淡入哪个元素在

来源

2011-12-13 18:23:46 Evan

埃文您好，感谢，但我需要特定页面上的特定图像。数组的想法听起来像它会工作，但如何调用每个页面的数组？我给每个页面的主体ID（即“指数”，“接触”等，这样我就可以再使用ID标签（#INDEX #logo）在不同的页面上的相同点添加不同的图像。现在我只需要让他们淡出。 – 2011-12-13 18:56:43

哎呀对不起，我忘了淡入...你应该能够做到以上 – Evan 2011-12-13 22:00:40

这是我最近在一个项目中使用的一些代码。如果你不关心什么网页上的内容加载图像，只是有一堆随机图像，你可以尝试这样的事：

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; }。

来源

2011-12-13 18:28:37 sirmdawg

jQuery淡入在不同的页面上的不同图像

回答

相关问题