Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fccoelho7

[Resolvido] Transição de Patrocinadores

Por , em Javascript

Recommended Posts

fccoelho7    0

fccoelho7
Postado

Olá pessoal, estou fazendo um site, e nele colocarei uma <div> em que apareça a desapareça a logo, dando espaço a outra.

Preciso achar um java scritp que possa fazer essa função, acho que é um efeito chamado de alfa, se alguém souber, eu gostaria de pedir ajuda para me passar esse script ou estar me auxiliando a como fazer.

Vejam + o - o que estou falando:

 

Imagem Postada

 

Muito obrigado a todos ! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tópico Movido:

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript/DHTML

Compartilhar este post

Link para o post
Compartilhar em outros sites

eibon    2

eibon
Postado

Brinca com a opacidade da div.

elemento.style.opacity = [valor de 0 a 1] | [valor de 0 a 100 {Internet Explorer}]
Se quiser um fade como na imagem,brinca com a opacidade da div com intervalos de tempo (pode usar a sleep ou a setTimeOut para isso).

Se quiser um exemplo avisa.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webmind    5

webmind
Postado

aconselho a usar o framework jquery pois tem o FadeTo que e crossbrowser, pois o ie trabalha com o filtro alpha e o firefox, opera com o opacity somente

Compartilhar este post

Link para o post
Compartilhar em outros sites

eibon    2

eibon
Postado

Exemplos:

<html>
	<head>
		<title>Exemplo</title>
		<style type="text/css">
			#res {
				background-color: #0000ff;
				width: 400px;
				height: 200px;
			}
		</style>
		<script type="text/JavaScript">
			adicionaEvento(window, 'load', function(){
				var divRes = document.getElementById("res");
				adicionaEvento(document.getElementsByName("b1")[0], 'click', function(){
					fadeOut(divRes);
				}, false);

				adicionaEvento(document.getElementsByName("b2")[0], 'click', function(){
					fadeIn(divRes);
				}, false);

				adicionaEvento(document.getElementsByName("b3")[0], 'click', function(){
					var bgColor = divRes.style.backgroundColor;
					if(bgColor == '#00ff00') divRes.style.backgroundColor = '#0000ff';
					else divRes.style.backgroundColor = '#00ff00';
				}, false);
			}, false);

			function fadeOut(elemento){
				var maxO = (isIE())? 100 : 1;
				if(elemento.style.opacity == '0'){
					elemento.style.display = 'none';
					return;
				}
				if(!elemento.style.opacity) elemento.style.opacity = maxO;
				elemento.style.opacity = Number(elemento.style.opacity) - maxO/10;
				setTimeout(function(){ fadeOut(elemento); }, 80);
			}

			function fadeIn(elemento){
				var maxO = (isIE())? 100 : 1;
				elemento.style.display = 'block';
				if(elemento.style.opacity < maxO){
					elemento.style.opacity = Number(elemento.style.opacity) + maxO/10;
					setTimeout(function(){ fadeIn(elemento); }, 80);
				}
			}

			function adicionaEvento(elemento, evento, funcao, bool){
				bool = (bool == null)? false : bool;
				if(elemento.addEventListener)
					elemento.addEventListener(evento, funcao, bool);
				else
					elemento.attachEvent('on' + evento, funcao);
			}

			function isIE(){
				var browserName = navigator.appName;
				if(browserName.match(/(internet explorer|microsoft)/i))
					return true;
				return false;
			}
		</script>
	</head>
	<body>
		<div id="res"></div>
		<input type="button" name="b1" value="Fade out" />
		<input type="button" name="b2" value="Fade in" />
		<input type="button" name="b3" value="Muda a cor" />
	</body>
</html>

jQuery:

<html>
	<head>
		<title>Exemplo</title>
		<style type="text/css">
			#res {
				background-color: #0000ff;
				width: 400px;
				height: 200px;
			}
		</style>
		<script type="text/JavaScript" src="jquery.js"></script>
		<script type="text/JavaScript">
			$(document).ready(function(){
				var divRes = $("#res");
				$('input[name="b1"]').click(function(){
					divRes.fadeOut("slow");
				});

				$('input[name="b2"]').click(function(){
					divRes.fadeIn("slow");
				});

				$('input[name="b3"]').click(function(){
					if(divRes.css('background-color') == '#00ff00'){
						divRes.css('background-color', '#0000ff');
					} else {
						divRes.css('background-color', '#00ff00');
					}
				});
			});
		</script>
	</head>
	<body>
		<div id="res"></div>
		<input type="button" name="b1" value="Fade out" />
		<input type="button" name="b2" value="Fade in" />
		<input type="button" name="b3" value="Muda a cor" />
	</body>
</html>

Pega os exemplos de base e faz o que quer...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito