web-dev-qa-db-fra.com

Développer/Réduire div en survol/en sortie avec jQuery

Je cherche un plugin jQuery pour développer les éléments div de manière à révéler leur débordement (le cas échéant) en survol. Illustration:

enter image description here

Le plugin devrait fonctionner sur les div relativement positionnés (ce qui implique, je suppose, que vous créez une copie du div, définissez son positionnement sur absolu, puis déterminez où le placer).

Y at-il un tel plugin déjà disponible là-bas?

jqueryhtmlhoverposition
22
Max

Vous n'avez pas besoin d'un plugin . Ajoutez juste le css approprié et utilisez jQuery animate: 

$div
.on('mouseenter', function(){
    $(this).animate({ margin: -10, width: "+=20", height: "+=20" });
})
.on('mouseleave', function(){
    $(this).animate({ margin: 0, width: "-=20", height: "-=20" });
})​

démo ici

26
tborychowski

Les images manquent ici ... mais voici comment j'ai réussi cela il y a quelques années. La théorie de base est que toutes les images/divs sont absolus, à l'intérieur de leur propre domaine relatif. J'anime ensuite la position left & top à la fois -negatively. Cela les fait dépasser au-dessus des boîtes environnantes et donne l’impression qu’elles sortent. (Bien sûr, vous devez également vous assurer que le z-index de celui-ci est plus élevé que ceux qui l'entourent).

jsFiddle DEMO

$(".img a img").hover(function() {
    $(this).closest(".img").css("z-index", 1);

    // this is where the popping out effect happens
    $(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");

}, function() {
    $(this).closest(".img").css("z-index", 0);
    $(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
});​

Les styles que j'ai pour ces deux choses sont:

.img { 
   position:relative; 
   z-index:0px;  
}

.img a img { 
   position:absolute;
   border:1px #1b346c solid; 
   background:#f1f1f1; 
   width:90px; 
   height:90px; 
}
25
Mark Pieszak - DevHelp.Online

grâce à @MarkPieszak. Pour les éléments créés dynamiquement, utilisez

$(document).on({
  mouseenter: function () {
    $(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
  },
  mouseleave: function () {
    $(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
  }    
}, '.img a img');

.hover() ne fonctionne que sur des éléments statiques. plus ici

1
the_ousek

Si c'est du texte, c'est un peu plus compliqué ...

Je l'utilise comme ça:

$('.floating').mouseenter(function(){
  const $this = $(this);
  const dimension = $this.data('dimension');
  const ratioEnlarged = 2;

  const tempElement = $this.clone();
  tempElement.appendTo('body');
  tempElement.css({
    width: dimension.width,
    height: dimension.height
  });

  if(tempElement.is(':offscreen')){
    // Change this to animate if you want it animated.
    $this.css({
      'margin-left': -dimension.width * ratioEnlarged/2,
      'margin-top': -dimension.height * ratioEnlarged/4,
      'font-size': ratioEnlarged + 'em',
      width: dimension.width * ratioEnlarged,
      height: dimension.height * ratioEnlarged
    });
  } else {
    $this.css({
      'margin-left': -dimension.width * ratioEnlarged/4,
      'margin-top': -dimension.height * ratioEnlarged/4,
      'font-size': ratioEnlarged + 'em',
      width: dimension.width * ratioEnlarged,
      height: dimension.height * ratioEnlarged
    });
  }

  tempElement.remove();
});

$('.floating').mouseleave(function(event) {
  const $this = $(this);
  const dimension = $this.data('dimension');

  if(!$this.hasClass('context-menu-active')){
    $this.css({
      margin: 0,
      'font-size': '1em',
      width: dimension.width,
      height: dimension.height
    });
  }
});
0
Polv

Vous pouvez réellement le faire entièrement avec css, c’est un extrait d’un site Web mien, trop paresseux pour l’éditer, mais vous avez l’idée: 

<ul class="hover">
  <li style="margin-top:40px;"">
   <a href=""><img src="images/Home/Home.jpg" alt="home" style="width:130px; height:100px;"/>
   <img src="images/Home/Home.jpg" alt="home" class="preview" style="width:180px; height:150px;"/></a>
  </li>
  <li style="margin-left:55px; margin-top:-20px;">
   <a href=""><img src="images/About/About.jpg" alt="About The Author" style="width:200px; height:200px;"/>
   <img src="images/About/About.jpg" alt="About The Author" class="preview" style="width:250px; height:250px;"/></a>
  </li>
</ul>

css:

/* begin hover */

.hover{
cursor: default;
list-style: none;
}

.hover a .preview{
display: none;
}

.hover a:hover .preview{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hover img{
background: white;
border-color: black;
border-style: solid;
border-width: 4px;
color: inherit;
padding: 2px;
vertical-align: top;
-moz-border-radius: 15px;
border-radius: 15px;
}

.hover li{
background: black;
border-color: black;
border-style: solid;
border-width: 1px;
color: inherit;
display: block;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}

.hover .preview{
border-color:black;
border-width:8px;
border-stle:solid;
}

li{
-moz-border-radius: 15px;
border-radius: 15px;
}

il y a quelques styles inutiles mais là encore, vous voyez l'idée. fondamentalement, vous ne faites que montrer une image au-dessus de l'original, en survol

0
Nick