Ir para conteúdo

POWERED BY:

Arquivado

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

Jonblanc

Slide Javascript

Por , em Javascript

Recommended Posts

Jonblanc    0

Jonblanc
Postado

Boa Tarde, ainda sou iniciantes em javascript.

Queria que me ajudassem a resolver uns probleminhas:

 

Meu slide quando clico os ícones descem, queria que ficassem fixados, sem se mover.

E também queria que a imagem que aparece, quando clico no icone, estivesse fixado numa div ao lado dos ícones, em que todos os icones que eu clicasse, aparecesse nessa div. Tentei dar um jeitinho com a propriedade "margin", mas não deu muito certo, porque durante a animação a imagem fica cortada, e só aparece ela inteira quando a animação acaba. Também tentei colocar "float: left", mas não funcionou.

 

O código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
	<head>
			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
			<title>Toggle texto</title>
			<style type="text/css" media="all">
			#box-toggle {
				width:1300px;
				height:50px;
				margin:0 ;
				text-align:justify;
				font:12px/1.4 Arial, Helvetica, sans-serif;
				}
			#box-toggle .opcoes1 {margin-bottom:30px; }
			#box-toggle img {
				display:block;
				cursor:pointer;
				font-weight:bold;
				font-size:14px;
				color:#c30; 
				margin-top:15px;
				
				}
			</style>
			<script type="text/javascript" src="jquery.js"></script>
			<script type="text/javascript"> 
				

				$(document).ready(function(){
					$('.opcoes1').before('<img src="Atendimento-persolanizado.png" />');
					$('.opcoes2').before('<img src="Atendimento-persolanizado.png" />');
					$('.opcoes3').before('<img src="Atendimento-persolanizado.png" />');
					$('.opcoes1').css('display', 'none')
					$('.opcoes2').css('display', 'none')
					$('.opcoes3').css('display', 'none')
					$('img', '#box-toggle').click(function() {
						$(this).next().slideToggle('slow')
						.siblings('.opcoes1:visible, .opcoes2:visible, .opcoes3:visible').slideToggle('fast');
					
						$(this).toggleText('Revelar','Esconder')
						.siblings('img').next('.opcoes1:visible').prev()
						.toggleText('Revelar','Esconder')
					});
				})
			</script>
	</head>
	<body>
			<div id="box-toggle">      
				<div class="opcoes1">
					<div style="margin: -130px 0 0 190px;"><img src="escolha1.png" /></div><br />
				</div>
				<div class="opcoes2">
					<div style="margin: -130px 0 0 190px;"><img src="escolha2.png" /></div><br />
				</div>
				<div class="opcoes3">
					<div style="margin: -130px 0 0 190px;"><img src="escolha3.png" /></div><br />
				</div>
			</div>
	</body>
</html>

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