Expandable Banner auf der Maus über

Derzeit arbeite ich an einer website, wo mein Mandant bat mich um ein Banner erweitert sich bei mouseover. Ähnlich wie diese website ( http://www.londontown.com/majorcampaigns/ ).
Wenn wir schweben auf LondonTown.com Banner es nur erweitert und zeigen rest der Anzeige.

Ich versuchte mein bestes, aber ich konnte nicht es herausfinden, Bitte helfen Sie mir.

InformationsquelleAutor |
  1. 1

    Beispiel gezeigt ist, erfolgt über flash. die Größe der Bühne des Hauptfilms sollte gleich die "erweitert" - Größe der banner. es gibt viele Möglichkeiten, dies zu tun, ich werde versuchen und erklären.

    setzen Sie eine Schleife movieclip auf der 1. frame mit einem stop(); Befehl. dieser movieclip zeigt das banner im nicht-maximierten Zustand.
    dann steckst du einen unsichtbaren button über die gesamte Bühne und setzen Sie den folgenden actionscript-Code auf die unsichtbare Schaltfläche

    button.rollOver = function() {
 gotoAndPlay (2);
}

    also der Film geht und spielt von Bild 2, zeigt die 'erweitert' - animation. Sie können eine rollout-Funktion zur Rückkehr in den 1. frame.

    natürlich, den flash-Film gesetzt werden muss, um wmode=transparent, wenn es eingebettet ist in eine HTML-Datei. hoffe, das hilft

    InformationsquelleAutor
  2. 0

    Für "Alice im Wunderland" Zwecke, die ich definiert haben zwei Funktionen. Das ist Humor! Sie brauchen nur eine, wie Sie gehen in die Höhe.

    Ich noch nicht "animiert", um den Effekt zu Ihre Frage war, über den ausbau der division auf hover - so ist dies ein einfaches Beispiel.

    <div style="z-index: 1; height: 30px;">
    <div style="position: absolute; overflow:hidden; z-index: 3000; width: 500px; height: 30px; background-color: Aqua;" onmouseover="eatMe(this, 200);" onmouseout="drinkMe(this, 30);">
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
    </div>
   </div>

<p>More text here</p>

<script type="text/javascript">
var eatMe = function(elem, height) {
    elem.style.height = height + "px";
};

var drinkMe = function(elem, height) {
    elem.style.height = height + "px";
};
</script>
    InformationsquelleAutor
  3. 0

    Können Sie erstellen ein banner wie das Blitzgerät mit einem transparenten Bereich und wmode=transparent.

    Zunächst (ohne hover) das banner ist, sagen wir mal, 250px Breite. Wenn Sie den Mauszeiger darüber schweben, es erweitert auf 500 Pixel Breite. Es sieht wie die SWF-wächst, aber in der Tat legt es oben auf der Seite mit einem transparenten hintergrund.

    InformationsquelleAutor
  4. 0

    Ist das Recht einfach mit jQuery. Wenn Sie möchten, eine belebende Wirkung, nehmen Sie einen Blick auf http://api.jquery.com/slideDown/

    slideDown können Sie manipulieren die Höhe der DOM-Einbauteile in eine glatte Animation Weg.

    Glück.

    InformationsquelleAutor
  5. 0

    Könnten Sie .animate() Funktion auf .hover() des Elements.

    Ich geändert Sohnee code ein bisschen mit jQuery.

    mit seinem html:

       <div style="z-index: 1; height: 300px; width:300px;background-color: blue;" >
    <div class='block' style="position: absolute; overflow:hidden; z-index: 3000; width: 200px; height:200px; background-color: Aqua;">
      <p class='banner' style='display:none'>I'm a banner that goes out when I needed to.</p>
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
    </div>
   </div>

<p>More text here</p>

    und hier ist eine der jQuery:

    $(".block").hover(function(){
  $(this).animate({"width": "350px"}, 1000);
  $('p.banner').toggle('slow');
},function(){
  $(this).animate({"width": "190px"}, 500);
  $('p.banner').toggle('slow');
});​

    hier ist eine funktionierende demo.

    bitte schauen Sie auf hover und animieren für ein besseres Verständnis.

    InformationsquelleAutor
  6. 0

    Check out: Expandable Banner

    Diesem Media-Kit ist die beste und Letzte Lösung, die Sie jemals brauchen werden, um Ihre eigenen erstellen Expandable Banner.

    Alles, was Sie tun müssen, ist, ändern Sie 3 Dinge:

    1. Ändern Sie den Speicherort Ihres Banners Dateien.
    2. Ihre Banner Abmessungen.
    3. Die Richtung, die Sie zu erweitern. (up, down, left, right, center)

    Fertig.

    InformationsquelleAutor
Schreibe einen Kommentar