頁面加載時更改元素可見性

好的，對於那些看過新的Google Page的人，我試圖在我自己的網頁上看到類似的想法。基本上，我希望在屏幕上移動鼠標時，中間的圖像會淡入。這裏是網址：頁面加載時更改元素可見性

http://mageia.rh.rit.edu/

這是我使用來獲得大部分的影響Jquery的：http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/

然而，您也許能告訴，加載圖像，然後淡出。我想要發生的事情是，在移動鼠標之前，圖像根本不會被看到，就像在Google網頁上一樣。我想通過javascipt和CSS改變圖片的可見性，但我不知道如何去做。想法將不勝感激！

2009-12-13 Ethan Mick

查看我的更新.. – cletus 2009-12-13 06:41:44

CSS：

div.fade_in { display: none; }

你可以把它淡入在頁面加載：

$(function() { 
    $("div.fade_in").fadeIn(); 
});

如果你想等待鼠標移動：

function fade_in() { 
    $("div.fade_in").fadeIn(); 
    $("html").unbind("mousemove", fade_in); 
} 

$("html").mousemove(fade_in);

編輯：在IE8（兼容模式），FF3.5和Chrome 3中測試的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="http://mageia.rh.rit.edu//resources/main.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
function fade_in() { 
    $("div.fade_in").fadeIn(); 
    $("html").unbind("mousemove", fade_in); 
} 

$(function() { 
    $("html").mousemove(fade_in); 
}); 
</script> 
<style type="text/css"> 
div.fade_in { display: none; } 
</style> 
</head> 
<body> 
<h1 class="centertext">Welcome to Mageia</h1> 
<h3 class="centertext">The Works of Genii</h3> 
<div id = "container" class="fade_in" > 
<img class="image1" src="http://mageia.rh.rit.edu/resources/Escher.gif" /> 
</body> 
</html>

來源

2009-12-13 05:57:09 cletus

不錯，+1。不記得谷歌一直等到鼠標移動。我想'display：none'要比搞不透明'的不同實現簡單得多。 – Isaac 2009-12-13 06:00:02

這看起來正是我正在尋找的，但我無法完成它的工作。如果我讓CSS顯示：none，那麼即使在移動鼠標之後圖像也不會加載。如果我將它設置爲可見性：隱藏，則加載圖像時會出現同樣的問題，然後消失，然後當您移動鼠標時，它會重新出現。有什麼想法嗎？ – 2009-12-13 06:21:58

對於CSS：

imageID{opacity:0.0;filter:alpha(opacity=00)}

這確保了未示出的圖像，直到JS被加載。

對於使用Javascript：

$(document).ready(function(){ 
    $("imageID").fadeIn("slow"3); 
});

這改變了從0到1

乾杯透明度！

來源

2009-12-13 05:55:35 Isaac

頁面加載時更改元素可見性

回答

相關問題