Schieben Sie div horizontal vom Bildschirm in die Mitte?

Dies ist die Javascript in den gayadesign Tabs verwendetSchieben Sie div horizontal vom Bildschirm in die Mitte?

var TabbedContent = { 
    init: function() { 
     $(".tab_item").mouseover(function() { 

      var background = $(this).parent().find(".moving_bg"); 

      $(background).stop().animate({ 
      left: $(this).position()['left'] 
     }, { 
      duration: 300 
     }); 

     TabbedContent.slideContent($(this)); 

    }); 
}, 

slideContent: function(obj) { 

    var margin = $(obj).parent().parent().find(".slide_content").width(); 
    margin = margin * ($(obj).prevAll().size() - 1); 
    margin = margin * -1; 

    $(obj).parent().parent().find(".tabslider").stop().animate({ 
     marginLeft: margin + "px" 
    }, { 
     duration: 300 
    }); 
} 
} 

$(document).ready(function() { 
TabbedContent.init(); 
});

Wie kann ich, dass in den bereitgestellten HTML umzusetzen?

Ich versuche, dies zu imitieren: http://www.gayadesign.com/scripts/tabbed/

<body> 

{block:Posts} 

<div id="outer"> 
{block:Photo} 
<img src="http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png"> 
<div id="tooltip"> 

<div class="photo"> 
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag} 
</div> 
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption} 

</div> 
{/block:Photo} 
</div> 

{/block:Posts} 
</body>

Quelle

2010-12-30 Earl Larson

Um Code wortwörtlich anzuzeigen (und hervorheben), versehen Sie jede Zeile mit vier Leerzeichen (oder wählen Sie sie aus und klicken Sie auf die Schaltfläche ** {} ** oben). – BoltClock

Oh, das hätte mir geholfen, als ich mich angemeldet habe. Danke Bolzen! –

Ich bin mir ziemlich sicher, dass Sie uns auf einen Link für ein Skript hingewiesen haben ... haben Sie versucht, dieses Skript zu betrachten? Ich bezweifle, wenn Sie das Skript selbst nicht verstehen können, dann werden Sie wahrscheinlich nicht die vollständige Antwort bekommen, die Sie wollen. – jondavidjohn

jQuerys kann .animate() Funktion jede beliebige CSS-Eigenschaft animieren.

Zum Beispiel:

$('#item1').animate({left: '+=50px'});

Wird #item1 50px nach rechts bewegen. Sie können absolute Zahlen wie '50px' verwenden, wenn Sie möchten.

Quelle

2010-12-30 19:58:09

Wie würde ich das bei mouseover des Bildes tun? –

@Earl ein Blick auf dieses Beispiel warf ich zusammen: http://jsfiddle.net/8AMa4/ –

Das sieht gut aus, aber mein Problem ist, ich brauche jeden Beitrag, um einen eigenen Tab haben. Also, wenn Sie die Tags für sagen sagen, ein Foto-Post in einem div, die mit der ersten Registerkarte korreliert, werden alle Foto-Posts in diesem Tab angezeigt. Ich muss jedes in einem eigenen Tab haben. Deshalb habe ich von Grund auf neu gebaut. –

Schieben Sie div horizontal vom Bildschirm in die Mitte?

Antwort

Verwandte Themen