Extensible sur la Souris sur la Bannière

Je suis actuellement en train de travailler sur un site web, d'où mon client m'a demandé de placer une Bannière qui s'étend sur le Dessus de la Souris. Similaire à ce site web ( http://www.londontown.com/majorcampaigns/ ).
Lorsque nous avons passez la souris sur LondonTown.com Bannière juste se dilate et se montrent reste de l'Annonce.

J'ai essayé de mon mieux, mais je ne pouvais pas comprendre, s'il vous Plaît aider moi.

InformationsquelleAutor |
  1. 1

    l'exemple que vous nous avez montré est fait à l'aide de flash. la taille de la scène du film principal doit être égale à la "étendu" de la taille de la bannière. il y a beaucoup de façons de le faire, je vais essayer de l'expliquer.

    vous mettre une boucle movieclip sur la 1ère image avec un stop(); commande. ce clip montre la bannière dans le non-état d'expansion.
    ensuite, vous mettez un bouton invisible sur l'ensemble de la scène et de mettre le code actionscript suivant sur le bouton invisible

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

    de sorte que le film se passe et se joue à partir de l'image 2, qui montre l' "l'expansion de' animation. vous pouvez utiliser un déploiement de la fonction de retour à la 1ère image.

    bien sûr, la vidéo flash a besoin d'être mis à wmode=transparent lorsqu'il est incorporé dans un fichier HTML. espérons que cela aide

    InformationsquelleAutor
  2. 0

    Pour "Alice au pays des Merveilles", j'ai défini deux fonctions. C'est de l'humour! Vous avez seulement besoin de l'un que vous passez dans la hauteur.

    Je n'ai pas "d'animation" l'effet que votre question était à propos de l'expansion de la division de l'passez - donc, c'est un exemple simple.

    <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

    Vous pouvez créer une bannière comme ça en Flash avec une zone transparente et wmode=transparent.

    Au premier abord (sans hover) la bannière est, disons, 250 px de largeur. Lorsque vous passez, il s'étend sur 500 px de largeur. Il semble comme le SWF est en croissance, mais en fait, il fixe sur le haut du site avec un fond transparent.

    InformationsquelleAutor
  4. 0

    C'est vraiment simple avec jQuery. Si vous souhaitez une animation effet, prendre un coup d'oeil à http://api.jquery.com/slideDown/

    slideDown vous permet de manipuler la hauteur des DOM-elemets dans un douceur de l'animation de façon.

    Bonne chance.

    InformationsquelleAutor
  5. 0

    Vous pouvez utiliser .animate() fonction .hover() de l'élément.

    J'ai modifié Sohnee du code un peu avec jQuery.

    avec son 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>

    et voici un jQuery:

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

    voici un travail démo.

    s'il vous plaît regardez passez la souris et animer pour une meilleure compréhension.

    InformationsquelleAutor
  6. 0

    Découvrez: Les Bannières Extensibles

    Ce dossier de presse est la meilleure et dernière solution que vous aurez jamais besoin pour créer vos propres Bannières Extensibles.

    Tout ce que vous devez faire est de changer 3 choses:

    1. Modifier l'emplacement de votre bannière fichiers.
    2. Vos bannières dimensions.
    3. La direction qu'il se développera. (haut, bas, gauche, droite, centre)

    Votre Fait.

    InformationsquelleAutor