페이지로드시 요소 가시성 변경

새 Google 페이지를 본 사람이라면 내 웹 페이지에서 비슷한 아이디어를 얻으려고합니다. 기본적으로 화면의 마우스를 움직이면 중간의 이미지가 희미 해지기를 바랍니다.페이지로드시 요소 가시성 변경

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

이 내가 영향을 미치는 대부분 얻기 위해 사용하고있는 JQuery와있다 : 다음은 URL 당신이 이미지로드를 말할 수있을 것 같은, 그러나 http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/

은 다음 페이드 아웃 . Google 웹 페이지 에서처럼 마우스를 움직이면 이미지가 전혀 보이지 않게됩니다. 아마 javascipt와 CSS로 이미지의 가시성을 바꾸려고 생각하고 있었지만 어떻게해야할지 모르겠습니다. 아이디어는 높이 평가 될 것입니다! CSS를 들어

출처

2009-12-13 Ethan Mick

내 업데이트 참조 .. – cletus

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. 마우스가 움직일 때까지 Google이 기다렸던 것을 기억하지 못했습니다. 그리고 나는'display : none'이'opacity'의 다른 구현을 망칠 때보 다 훨씬 간단하다고 봅니다. – Isaac

이것은 내가 찾고있는 것처럼 보이지만 실제로 작동시키지는 못합니다. CSS에서 display : none이라고 말하면 마우스를 움직여도 이미지가 전혀로드되지 않습니다. 가시성을 설정 한 경우 : 숨김, 동일한 문제가 이미지로드와 함께 발생하면 사라지고, 마우스를 움직이면 다시 나타납니다. 이견있는 사람? –

: 이것은 JS가로드 될 때까지 화상이 표시되지 않도록

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

. 자바 스크립트를 들어

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

이 1

환호 0에서 불투명도를 변경!

출처

2009-12-13 05:55:35 Isaac

페이지로드시 요소 가시성 변경

답변

관련 문제