1

好吧，对于那些看过新 Google 页面的人，我正试图在我自己的网页上获得类似的想法。基本上，我希望中间的图像在鼠标在屏幕上移动时淡入。这是网址：

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

这是我用来获得大部分影响的 Jquery：http: //hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/

但是，正如您可能知道的那样，图像加载然后淡出。我希望发生的事情是在您移动鼠标之前根本看不到图像，就像在 Google 网页上一样。我正在考虑通过 javascipt 和 CSS 改变图像的可见性，但我不知道该怎么做。想法将不胜感激！

4

2 回答 2

3

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-13T05:57:09.877 回答
0

对于 CSS：

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

这样可以确保在加载 JS 之前不会显示图像。

对于 Javascript： 

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

这会将不透明度从 0 更改为 1。

干杯!

于 2009-12-13T05:55:35.293 回答