Ir para conteúdo

POWERED BY:

Arquivado

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

-=Felipe=-

[Resolvido] Como obter esse efeito

Por , em Desenvolvimento frontend

Recommended Posts

Henrique Barcelos    290

Henrique Barcelos
Postado

Você precisa colocar todos os vídeos da página posicionados relativamente com um z-index alto:

object {
	position: relative;
	z-index: 400;
}

No HTML:

 

<a href="#" id="apaga_acende">Apagar/Acender Luzes</a>

Agora entra o javascript da coisa [meio 'apressado', não tenho certeza que vai funcionar]:

 

window.onload = function(){
	document.getElementById('apaga_acende').onclick = function(){
 	if(!document.getElementById('light_down')){
 	criaFundo('#000');
 	} else {
 	removeFundo();
 	}
	}
}
function criaFundo(cor, opacidade){
	if(document.getElementById('light_down')) return false;

	opacidade = opacidade || .8;
	var div = document.createElement('div');
	div.setAttribute('id', 'light_down');
	div.style.backgroundColor = cor;
	div.style.opacity = opacidade;
	div.style.filter = 'alpha(opacity='+opacidade*100+')';
	div.style.position = 'absolute';
	div.style.top = '0';
	div.style.left = '0';
	div.style.zIndex = 300;

	var height = window.scrollHeight; //ou document.scrollHeight, não me lembro...
	var width = window.scrollWidth; //ou document.scrollWidth, não me lembro...

	div.style.width = width+'px';
	div.style.height = height+'px';

	document.body.appendChild(div);
}

function removeFundo(){
 	var div = document.getElementById('light_down');
 	if(!div) return false;
 	div.parentNode.removeChild(div);
}

90% de chance de funcionar, testa aí...

 

Testado e aprovado:

<!Doctype HTML>
<html>
<head>
<title>Teste</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

a {
	color: #069;
}

body, html {
	height: 100%;
}
</style>
<script type="text/javascript">
window.onload = function(){
	var link = document.getElementById('apaga_acende');
	if(!link) return false;

	link.onclick = function(){
 	if(!document.getElementById('light_down')){
	 	criaFundo('#000');
		this.style.position = 'relative';
		this.style.zIndex = 401;
		this.style.color = '#FFF';
	} else {
 		removeFundo();
		this.style.position = 'static';
		this.style.zIndex = '';
		this.style.color = '#069';
 	}
	}
}
function criaFundo(cor, opacidade){
 	if(document.getElementById('light_down')) return false;
	
 	opacidade = opacidade || .8;
 	var div = document.createElement('div');
 	div.setAttribute('id', 'light_down');
 	div.style.backgroundColor = cor;
 	div.style.opacity = opacidade;
 	div.style.filter = 'alpha(opacity='+opacidade*100+')';
 	div.style.position = 'absolute';
 	div.style.top = '0';
 	div.style.left = '0';
	div.style.zIndex = 400;

 	var height = document.body.scrollHeight; //ou document.scrollHeight, não me lembro...
 	var width = document.body.scrollWidth; //ou document.scrollWidth, não me lembro...
 	div.style.width = width+'px';
 	div.style.height = height+'px';

 	document.body.appendChild(div);
}

function removeFundo(){
 	var div = document.getElementById('light_down');
 	if(!div) return false;
 	div.parentNode.removeChild(div);
}
</script>
</head>
<body>
 	<a href="#" id="apaga_acende">Apagar/Acender</a>
</body>
</html>

Só adaptar http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Mas você não 'coloca' o vídeo.

 

A página já deve estar pronta.

 

Então você muda o CSS dos vídeos:

object[type="application/x-shockwave-flash"] { position: relative; z-index: 7 }

 

E adiciona o código do Henrique.

Compartilhar este post

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

Informação importante

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

  Aceito