页面加载时更改元素可见性

好的，对于那些看过新的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

页面加载时更改元素可见性

回答

相关问题