Ir para conteúdo

Arquivado

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

Annyh

[Resolvido] barra de rolagem personalizada, e ocultar e mostrar

Por , em Javascript

Recommended Posts

Annyh    4

Annyh
Postado

boa noite pessoal...

 

estou querendo colocar uma barra de rolagem personalizada em uma div do meu site, com imagens, e queria que vcs me indicassem tutoriais de preferencia em portugues, de como consiguir este efeito... e tambem ja aproveitando queria um tutorial esconder/mostrar div...

 

se alguem puder, mande uns links ai...

 

obrigada amigos...

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

O efeito do scroll acredito que isso te ajude: http://maujor.com/tutorial/scroll_bar.php

 

 

___+____+____+____+____+____+

 

 

 

O efeito de esconder e mostrar é bem simples...

Você só precisa ter uma noção básica de css e Javascript para conseguir entender :)

 

Fiz o script rapidinho para você

o código está comentando mas caso tenha alguma dúvida ainda é só postar aqui

 

<html>
<head>
<script>
function efeito(){
	//Armazena o ID da div em uma váriavel chamada seudiv
 // seudiv pode ser mudado para um nome a sua escolha
	var seudiv = document.getElementById('div1');
	
	// condição para ele mostrar e esconder de acordo com o estado atual
 if(seudiv.style.display == 'block'){
		//caso o display do elemento for block ele muda para none
		seudiv.style.display = 'none';
	}else{
		//se não será block
 seudiv.style.display = 'block';
	}
}
// none = invisivel ; block = visivel
</script>
<style>
#botao{
 width: 100px;
	height: 20px;
	color: #fff;
 background: green;
	border: 2px solid #000;
}
#div1{
 width: 800px;
	background: #000;
	color: #fff;
 display: block;
}
</style>
</head>
<body>
</body>

<!-- Botão para disparar o efeito -->
<div id="botao"><a href="#" onclick="javascript: efeito();">Click Aqui</a></div>
<br/><br/>

<!-- Div alvo do efeito -->
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor orci in nunc tristique suscipit. Aliquam semper blandit vestibulum. Nullam lorem dui, 
pulvinar quis convallis at, auctor non lectus. Vivamus in metus felis, a ornare dolor. Maecenas tellus orci, ornare eget condimentum sed, pharetra et ipsum.
Vivamus molestie, justo sit amet pharetra consequat, nisi massa feugiat quam, id mollis leo nunc sed tellus. Suspendisse tempor dui vel ante vestibulum
vehicula. Ut non justo vel massa consectetur tincidunt. Maecenas at pellentesque lacus. 
Maecenas aliquet enim et mauris sollicitudin pulvinar. Aenean rhoncus accumsan neque id rutrum. Aliquam vel tellus sit amet sapien eleifend tincidunt.
Praesent in enim ac mi auctor ullamcorper. Mauris neque sem, facilisis quis volutpat at, viverra a risus. Ut malesuada viverra accumsan. Nunc quis tempor orci.
Phasellus nibh neque, scelerisque a pulvinar sit amet, ultrices sed ante. Donec mattis odio et odio ultrices vel porta magna egestas.
</div>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annyh    4

Annyh
Postado

não, o efeito da barra de rolagem não é este, pois este só é suportado pelo IE'KA'...rsrs

 

queria mesmo uma barra de rolagem feito em jquery personalizada, entendeu?

 

e o efeito que tu me mandou em css e JS, gostaria que fosse mais suave, tipo um fade na hora de sumir ou um slid_up... se você tiver um link de um tutorial já me ajuda...

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

e o efeito que tu me mandou em css e JS, gostaria que fosse mais suave, tipo um fade na hora de sumir ou um slid_up... se você tiver um link de um tutorial já me ajuda...

$(document).ready(function(){
		$("a #botao").click(function(){
			$("#div1:visible").slideUp("slow");
		});
});

caso ainda tenha dificuldades de uma olhada no site do Jquery pois tem uma documentação ótima

http://api.jquery.com/slideUp/

 

 

Quanto ao scroll seria melhor algum moderador da área mover para o fórum de JavaScript

pois talvez lá você tenha uma reposta mais rápida.

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

não, o efeito da barra de rolagem não é este, pois este só é suportado pelo IE'KA'...rsrs

o efeito da barra de rolagem seria troca de cores?

 

se for realmente só funfa no ieca e não é validado http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annyh    4

Annyh
Postado

olá!! estou com a mesma duvida...

Queria saber como faço pra substituir a barra de rolagem padrão do navegador tipo a do site da Norah Jones

 

Alguém sabe?

 

T+...

 

annodam, perfeito, queria uma barra igualzinha a esta, se você achar me passa por favor querido...

 

bjs

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

o efeito é obtido com java script

 

peça a algum moderador da área para mover http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annyh    4

Annyh
Postado

peço por gentileza, algum moderador desta area mover este topico para JavaScript

 

olha só annodam, consegui fazer a barra funcionar, ainda tem uns pequenos problemas, que não consegui arrumar, mas ta quase 100%, vou te mandar o endereço do meu exemplo ai tu tenta melhorar e me passa denovo...

 

 

barra de rolagem personalizada

 

 

quando aumento a largura da div a barra se comporta de uma forma estranha, as vezes não vai ate o fim do track...

e a ponta da seta de baixo, não aparece...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Müller    0

Guilherme Müller
Postado

A melhor script de barra de rolagem personalizada que conheço é a fleXcroll JS:

http://hesido.com/web.php?page=customscrollbar

 

Para uso comercial o autor pede para que seja comprada uma licensa, e com razão. Até agora não encontrei nenhuma igual em termos de versatilidade. Funciona com mouse wheel, com as teclas do teclado e o melhor: com javascript desabilitado a barra de rolagem normal aparece.

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