[TUTORIAL] Shiftactif slide 2012
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Shiftactif slide 2012
Slide actif |
CSS:
- Código:
#view {
width:795px; height: 260px;
border : solid 1px ;
border-radius : px; -moz-border-radius : px; -webkit-border-radius : px;
padding : 0px ;
}
.onglet {
margin: px 0px 0px 200px;
}
.onglet-table img {
/***Ярлык (Налоговая этикетка)***/
border : solid 1px ;
opacity:0.8;
border-radius : px; -moz-border-radius : px; -webkit-border-radius :0px;
padding : 0px 0px ;
width : 100px; height:px;
}
.onglet-table td {
/***Непрозрачность не активные ярлыки***/
opacity : 0.5 ;
}
.onglet-content > div {
display : none ;
border : solid px ;
border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px;
padding : 20px ; margin-bottom : 20px ;
width : 550px ;
background: transparent;
margin-bottom:200px;
}
.onglet-content > div.active{ display : block ; }
.onglet-table { border-spacing : 0px ; }
.onglet-table td.active, .onglet-table td:hover {
opacity : 1 ;
}
- Código:
<script>jQuery.fn.extend({everyTime:function(c,a,d,b){return this.each(function(){jQuery.timer.add(this,c,a,d,b)})},oneTime:function(c,a,d){return this.each(function(){jQuery.timer.add(this,c,a,d,1)})},stopTime:function(c,a){return this.each(function(){jQuery.timer.remove(this,c,a)})}});jQuery.extend({timer:{global:[],guid:1,dataKey:"jQuery.timer",regex:/^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?jQuery/,powers:{ms:1,cs:10,ds:100,s:1E3,das:1E4,hs:1E5,ks:1E6},timeParse:function(c){if(void 0==c||null==c)return null;var a=this.regex.exec(jQuery.trim(c.toString()));return a[2]?parseFloat(a[1])*(this.powers[a[2]]||1):c},add:function(c,a,d,b,e){var g=0;jQuery.isFunction(d)&&(e||(e=b),b=d,d=a);a=jQuery.timer.timeParse(a);if(!("number"!=typeof a||isNaN(a)||0>a)){if("number"!=typeof e||isNaN(e)||0>e)e=0;var e=e||0,f=jQuery.data(c,this.dataKey)||jQuery.data(c,this.dataKey,{});f[d]||(f[d]={});b.timerID=b.timerID||this.guid++;var h=function(){(++g>e&&0!==e||!1===b.call(c,g))&&jQuery.timer.remove(c,d,b)};h.timerID=b.timerID;f[d][b.timerID]||(f[d][b.timerID]=window.setInterval(h,a));this.global.push(c)}},remove:function(c,a,d){var b=jQuery.data(c,this.dataKey),e;if(b){if(a){if(b[a]){if(d)d.timerID&&(window.clearInterval(b[a][d.timerID]),delete b[a][d.timerID]);else for(d in b[a])window.clearInterval(b[a][d]),delete b[a][d];for(e in b[a])break;e||(e=null,delete b[a])}}else for(a in b)this.remove(c,a,d);for(e in b)break;e||jQuery.removeData(c,this.dataKey)}}}});jQuery(window).bind("unload",function(){jQuery.each(jQuery.timer.global,function(c,a){jQuery.timer.remove(a)})});</script>
<script type="text/javascript">
jQuery(document).ready(function(){
var img = jQuery(".onglet-table").find("td.active").find("img").attr('src');
jQuery("#view").css('background','url("'+img+'")')
jQuery(".onglet-table").find("td").mouseover(function(){
jQuery(".onglet-table").stopTime("slide");
var system = jQuery(this).closest(".onglet");
system.find(".onglet-table").find(".active").removeClass("active");
system.find(".onglet-content").find(".active").removeClass("active");
var id = jQuery(this).attr("name");
jQuery(this).addClass("active");
system.find(".onglet-content").find("div[name='"+id+"']").addClass("active");
var img = jQuery(this).find("img").attr('src');
jQuery("#view").css('background','url("'+img+'")')
});
jQuery(".onglet-table").find("td").mouseout(function(){
slideShoot();
});
slideShoot();
});
function slideShoot(){
var delay = 4000 ;
jQuery(".onglet-table").everyTime(delay, "slide", function(){
var active = jQuery(this).find(".active");
var system = jQuery(this).closest(".onglet");
active.removeClass("active");
system.find(".onglet-content").find(".active").removeClass("active");
var i = active.attr('name');
i++;
if (i==7){i=1;}
jQuery(this).find("td[name='"+i+"']").addClass("active");
system.find(".onglet-content").find("div[name='"+i+"']").addClass("active");
var img = jQuery(this).find(".active").find("img").attr('src');
jQuery("#view").css('background','url("'+img+'")')
});
}
</script>
Slide:
- Código:
<div id="view">
<div class="onglet">
<table class="onglet-table"><tr>
<!-- Imagens correspondentes ao número -->
<td name="1" class="active"><img src="http://img4.hostingpics.net/pics/950254bienvenu.png" /></td>
<td name="2"><img src="http://img4.hostingpics.net/pics/419654prsenattion.png" /></td>
<td name="3"><img src="http://img4.hostingpics.net/pics/912890banquet.png" /></td>
<td name="4"><img src="http://img4.hostingpics.net/pics/592352course.png" /></td>
<td name="5"><img src="http://img4.hostingpics.net/pics/512798attaque.png" /></td>
<td name="6"><img src="http://img4.hostingpics.net/pics/852194guerre.png" /></td>
</tr></table>
<div class="onglet-content" style="background-image:url(http://i43.servimg.com/u/f43/16/63/75/54/93906710.png);repeat:repeat-x;font-size:15px;">
<!-- Shiftactif - Diálogo -->
<div name="1" class="active">Slide 01</div>
<div name="2">Slide 02</a></div>
<div name="3">Slide 03</div>
<div name="4">Slide 04</div>
<div name="5">Slide 05</div>
<div name="6">Slide 06</div>
</div>
</div>
</div><!-- Dialogo Shiftactif - FIM -->
© Shiftactif
Tópicos semelhantes
» Entrevista especial Shiftactif 2012!
» Como propor o seu tutorial para ShiftActif?
» [TUTORIAL] Caixa de informação como ShiftActif
» Slide no blog
» O fim do mundo em 21 de Dezembro de 2012 - OPINIÃO
» Como propor o seu tutorial para ShiftActif?
» [TUTORIAL] Caixa de informação como ShiftActif
» Slide no blog
» O fim do mundo em 21 de Dezembro de 2012 - OPINIÃO
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|