![[TUTORIAL] Kwicks jQuery Buddy_Group](https://2img.net/h/cdn1.iconfinder.com/data/icons/df_On_Stage_Icon_Set/128/Buddy_Group.png){kind=icon}
Suporte Forumeiros
Início
Entrar
Cadastre-se
Mensagens
Moedas![[TUTORIAL] Kwicks jQuery Main_o10](https://i.servimg.com/u/f41/17/71/75/73/main_o10.png) | Kwicks jQuery |
- HTML
:seta2: Painel de Controle :seta2: Modulos :seta2: Gestão de Páginas HTML
![[TUTORIAL] Kwicks jQuery 2434149742](https://2img.net/u/1517/19/87/28/smiles/2434149742.png)
O codigo e esse:
- Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kwicks jQuery</title>
<style type="text/css">
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}
.kwicks li{
float: left;
width: 60px;
height: 60px;
}
#image1 {
background-image: url('URL-DA-IMAGEM-01') ;
}
#image2 {
background-image: url('URL-DA-IMAGEM-02');
}
#image3 {
background-image: url('URL-DA-IMAGEM-03');
}
#image4 {
background-image: url('URL-DA-IMAGEM-04');
}
#image5{
background-image: url('URL-DA-IMAGEM-05');
}
#image6{
background-image: url('URL-DA-IMAGEM-06');
}
#image7{
background-image: url('URL-DA-IMAGEM-07');
}
#image8{
background-image: url('URL-DA-IMAGEM-08');
margin-right: 3px;
}
.text a{
width: 200px;
line-heigh: 60px;
text-decoration: none;
color: #CC0000;
text-align: center !important;
display: block;
}
</style>
</head>
<body>
<ul class="kwicks">
<li id="image1"><a href="#"></a></li>
<li id="image2"><a href="#"></a></li>
<li id="image3"><a href="#"></a></li>
<li id="image4"><a href="#"></a></li>
<li id="image5"><a href="#"></a></li>
<li id="image6"><a href="#"></a></li>
<li id="image7"><a href="#"></a></li>
<li id="image8"><a href="#"></a></li>
<script src="http://s3.archive-host.com/membres/up/1696114791/java/rejquery-132.js" type="text/javascript"></script>
<script src="http://s3.archive-host.com/membres/up/1696114791/java/jqueryeasing13.js" type="text/javascript"></script>
<script src="http://s3.archive-host.com/membres/up/1696114791/java/kwi/jquerykwicks-151pack.js" type="text/javascript"></script>
<script language="JavaScript">
$().ready(function() {
$('.kwicks').kwicks({
max: 130,
spacing: 0,
duration: 1200,
easing: 'easeOutBounce'
});
});
</script>
</body>
</html>
Faça o mesmo Procedimento acima e crie outra pagina HTML com esse codigo:
- Código:
<div style="margin:auto;text-align:center;width:100%"><iframe src="URL-DO-HTML-1" style="background-color: transparent ! important; height:70px; width: 500px; border: none !important; overflow: hidden ! important;" allowtransparency="true" scrolling="no" frameborder="no"></iframe>
--> Ativação <--
Para ativar cole o código onde voce quer que o efeito Kwicks apareça.
- Código:
<object width="540" height="" data="URL-DO-HTML-2"></object>
Procure por: URL-DA-IMAGEM-(Número).
Substitua pelo URL da imagem em resolução 130 x 60
Procure por: URL-DO-HTML-1
Substitua pelo URL da 1ª página em HTML criada.
Procure por: URL-DO-HTML-2
Substitua pelo URL da 2ª página em HTML criada.
- Resultado
Infelismente não se e possivel mostrar o resultado ele e o seguinte "em qualquer imagem que você por ele fara tipo uma quebra na imagem).
© VirtualDesign/STAFFGROPS
