Ir para conteúdo

POWERED BY:

Arquivado

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

a1click_mac

[confira] Efeito hover. jQuery + input forms dinâmicos

Por , em Javascript

Recommended Posts

a1click_mac    0

a1click_mac
Postado

Galera, gostaria de saber como posso fazer esse efeito ( hover ) com os valores de contato + preços, igual Tecontato?

 

LINK => http://tecontato.com.br/

 

--

 

Vi no blog do @William, um efeito bacana de votação com aquelas estrelas, eu até tentei mexer em alguns itens, mas não sei como fazer para alterar também os valores interno e que esse valores estejam dentro de um ( input ), pois o mesmo depois será enviado por 

 $post no jQuery

,

 

--

 

 

Segue abaixo o código do @William ( modificado por tentativas )

 

Coloquei também no código abaixo ao invez de 

$('.stars li').click(function()

eu troquei para 

 $('.stars li').hover(function()

, porém o mesmo depois que tiro o mouse ele volta para o ( zero ) sozinho.

 

- @ gostaria de... { 1ª star ficasse ativa }

- @ gostaria de... { mesmo clicando encima de alguma star já selecionada, que ela continue onde esta, e não zere novamente }

- @ gostaria de... { poder ter varios input com os valores interno }

- @ gostaria de... { quando passar o mouse, ele mostre 2 valores = preço + quantidade de emails desse plano }

 

 

# Código PHP, é simples simples, recebe o 

 $_POST // form do input, é simples

 

 


<html>  
<head>  
<style type="text/css">  
* { margin: 0; padding: 0; list-style: none; }  
.stars {  
width: 100px;  
height: 20px;  
margin: 5px auto 0 auto;  
}  
.stars li {  
background: url('star.jpg') no-repeat;  
display: block;  
height: 20px;  
width: 20px;  
cursor: pointer;  
float: left;  
}  
.stars li.active {  
background-position: left -45px;  
}  
#produtos {  
width: 450px;  
margin: 20px auto 0 auto;  
}  
li {  
float: left;  
width: 150px;  
height: 200px;  
color: #1B57A3;  
text-align: center;  
}  
p {  
text-decoration: underline;  
font: 12px Arial, Verdana, sans-serif;  
}  
#sql {  
font: bold 20px Arial;  
color: #f00;  
text-align: center;  
clear: both;  
}  
</style>  

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
$('.stars li').click(function(){  
var $this = $( this );  
var ol = $this.parent('ol');  
var rating = $this.index()+1;  
var id_produto = ol.parent('li').find("input[name='id_produto[]']").val();  


if( $this.hasClass('active') && !$this.next('li').hasClass('active') ){  
$( ol ).find('li').removeClass('active');  
rating = 0;  
}  
else{  
$( ol ).find('li').removeClass('active');  
for( var i=0; i < rating; i++ ){  
$( ol ).find('li').eq( i ).addClass('active');
};  
}  



$.ajax({  
type: "POST",  
url: "enviar.php",  
data: "id_produto="+id_produto+"&voto="+rating,  
success: function( data ){  
$('#sql').html( data );  
}  
});  


});  
});  
</script>  



</head>  
<body>  

<ul>
<li>
<ol class="stars"><li></li><li></li></ol>  
<input type="hidden" name="id_produto[]" value="20.000 E-mails" /> 
</li>
</ul>				        

<div id="sql"></div> 


</body>  
</html>

 

 

# Alguém pode me dar essa força de como posso fazer isso?

 

Aguardo galera B)

Compartilhar este post

Link para o post
Compartilhar em outros sites

a1click_mac    0

a1click_mac
Postado

O efeito nos ( PLANOS ) onde você passa o mouse nos quadrados e eles vao trocando os valores em ( preço ) + ( quantidade de emails, etc )

 

Alguma idéia de como fazer...?

 

Alguém...?

 

@William eu sei que pode me dar essa força...

 

 

-- Blog do William --

 

Votação com estrelas [ tutorial blog wbruno ]

 

 

Demonstração online com estrelas [ blog wbruno ]

 

B)

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