web-dev-qa-db-ja.com

jQueryでホバー/アウトでdivを展開/縮小

jQuery要素を展開して、ホバーでのオーバーフロー（存在する場合）を明らかにするdivプラグインを探しています。図：

enter image description here

プラグインは、相対的に配置されたdivで動作するはずです（これは、divのコピーを作成し、その配置を絶対に設定してから、配置先を決定することを意味します）。

そのようなプラグインはすでにそこにありますか？

jqueryhtmlhoverposition
23
Max

プラグインは必要ありません。適切なcssを追加して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" });
})​

ここにデモ

27
tborychowski

ここに画像がありません...しかし、ここに数年前に私がこれをやってのける方法があります。基本的な理論は、画像/ divのすべてが絶対的なものであり、独自の相対領域内にあるということです。次に、left & top両方を配置-negatively。これにより、それらは周囲のボックスから突出し、飛び出しているように見えます。 （もちろん、これのz-indexが周囲のものよりも高いことを確認する必要もあります）。

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");
});​

これらの2つの目的で使用しているスタイルは次のとおりです。

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

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

@MarkPieszakに感謝します。 動的に作成された要素の場合

_$(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()は、静的要素でのみ機能します。もっと こちら

1
jmeinlschmidt

テキストの場合は、もう少し複雑です...

私はこれを次のように使用します：

$('.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

あなたは実際にCSSでこれを完全に行うことができます、これは私のウェブサイトからのスニペットであり、それを編集するのは非常に面倒すぎますが、あなたはアイデアを得る：

<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;
}

そこには不要なスタイルがいくつかありますが、ここでもアイデアが得られます。基本的には、ホバーの上に元の画像の上に1つの画像を表示するだけです

0
Nick