ShiftActif fórum

[TUTORIAL] Shiftactif slide 2012 Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Shiftactif slide 2012 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Shiftactif slide 2012 1660898911
ShiftActif fórum

[TUTORIAL] Shiftactif slide 2012 Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Shiftactif slide 2012 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Shiftactif slide 2012 1660898911

[TUTORIAL] Shiftactif slide 2012

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

  • 0

[TUTORIAL] Shiftactif slide 2012 Empty [TUTORIAL] Shiftactif slide 2012

Mensagem por Shek Sáb 2 Jun - 15:51


[TUTORIAL] Shiftactif slide 2012 Html

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 ;
      }
Scripts:
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
Shek

Shek
Administrador

Masculino
Idade : 30
PointActif's : 7411
ReputActifs : 97
Mensagens : 2777
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%

https://shiftactive.blogspot.com/

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos