1

了解しました。新しいGoogleページをご覧になった方のために、私は自分のWebページで同様のアイデアを実行しようとしています。基本的には、画面上を移動するマウスで中央の画像をフェードインさせたいと思います。URLは次のとおりです。

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

これは、ほとんどの影響を取得するために使用しているJqueryです：http： //hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/

ただし、おわかりのように、画像は読み込まれてからフェードアウトします。私がしたいのは、GoogleのWebページのように、マウスを動かすまで画像がまったく表示されないようにすることです。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 に答える