Question

当您在堆栈溢出时达到1000声誉时，您将获得一张可消耗的用户卡

enter image description here

当鼠标悬停在卡片上时。

如何重新创建此效果？怎么称呼？我的猜测是它的Jquery方法，但如果是这样，有人能指出我正确的方向，因为我找了它但却无法得到我需要的东西。

Answer 1

我不知道这是否是他们使用的，但是CSS3 transition animations将是一种简单的，没有编程方式。

Answer 2

你所追求的一个非常简单的例子是http://jsfiddle.net/RjpLt/

这足以让你开始。

<强>更新

现在使用ccs动画：http://jsfiddle.net/RjpLt/1/

Answer 3

简而言之：

当触发弹出窗口时，在DOM内部的某处动态添加具有适当内容的<div>（很可能是Javascript定位弹出窗口以及创建它）。此元素从小开始，然后设置为最终尺寸。同时，CSS规则指定弹出窗口的视觉外观。当鼠标离开弹出区域时，<div>将从DOM中删除，使弹出窗口消失。

Answer 4

我确定它确实使用了jQuery，我认为它是“有生命的”：

http://api.jquery.com/animate/

动画样式可能是大小和背景颜色，以及该区域发生的其他事情。

Answer 5

我认为这很简单$('#container).show('slow');

Answer 6

由于您提出了静态图像，因此很难确定究竟发生了什么。这是我的猜测：

它使用Hover触发事件： http://api.jquery.com/hover/

然后显示以显示隐藏的div： http://api.jquery.com/show/

类似的东西：

$('a.show-profile').hover(function(){ 
    $('#profile').show();
});

#profile需要事先通过css“display：none”或$（'＃profile'）隐藏.hide（）; http://api.jquery.com/hide/

Answer 7

我的猜测是（来自消息来源）：

StackExchange.helpers.MagicPopup({selector:".user-hover .user-gravatar48, .user-hover .user-gravatar32"

$(b).closest(".user-hover").find(".user-details a").attr("href"));return!b?null:"/users/user-info/"+b[1]},cache:!0,id:"user-menu",showing:f,removed:c}))}}}();

b.fadeOutAndRemove()):setTimeout(p,500)};b.animate({width:j,height:a,top:f.top+k.top},200,p);

但正如我所说，我是新手，所以它可能甚至不相关，但它是Animated onmouseover on the gravatar。

Answer 8

我创建了两个解决方案：

jsBin demo

使用所有相关内容动态填充DIV卡。
使用CSS

display:none

只有一张'BIG'卡会改变它在页面上的位置，克隆并显示悬停时的全部内容 - 准备该元素的CSS为display:block;所有内容。

悬停时：

获取悬停卡片的位置
抓住所有'小'卡内容并填充更大的卡片
在显示
将BIG卡放在小卡上，然后使用.show(600)显示它。
如果鼠标离开BIG卡，请使用.hide()

jQuery的：

$('body').append('<div id="userCard"><div id="userCardContent"></div>');

var $hoveredImg;
$('.userCardMini').on('mouseenter','img',function(e){
   $hoveredImg = $(this);
   var thisSrc = $hoveredImg.attr('src').split('s=')[0];
   var posX = $hoveredImg.offset().left-10;
   var posY = $hoveredImg.offset().top-10;
   $('#userCardContent').html( $hoveredImg.parent().html() );
   $('#userCardContent').find('img').attr('src', thisSrc+'s=64&d=identicon&r=PG');
   var t = setTimeout(function() {  
     $('#userCard').css({left:posX, top:posY}).show(600);
   }, 200);     
   $hoveredImg.data('timeout', t);  
}).on('mouseleave',function(){
  clearTimeout($hoveredImg.data('timeout'));
});
$('#userCard').mouseleave(function(){
  $(this).stop(1,1).hide();
});

HTML：

<div class="userCardMini" data-user="383904"></div>
<div class="userCardMini" data-user="1063093"></div>

CSS：

  .badge{
    width:6px;
    height:6px;
    border-radius:10px;
    font-size:11px;
    display:inline-block;
    margin:2px;
  }
  .gold{background:gold;}
  .silver{background:silver;}
  .bronze{background:#cc9966;}

  .userCardMini{
    width:200px;
    height:32px;
    /*background:#eee;*/
    margin:4px;
    clear:both;
  }
  a{color:#27f;}
  img.userImg{
    cursor:pointer;
    float:left;
    margin-right:10px;
    box-shadow:1px 1px 3px -1px #999;
  }
  .userDetails, .userLocation{display:none;}
  /* user card - BIG ONE */
  #userCard{
    position:absolute;
    top:0;
    left:0;
    width:280px;
    box-shadow:1px 1px 3px -1px #999;
    border-radius:3px;
    background:#666;
    color:#eee;
    display:none;
  }
  #userCardContent{
    width:260px;
    margin:10px;
  }
  #userCardContent a{color:#fff;}
  #userCard .userDetails,
  #userCard .userLocation{
    display:block;
    margin-bottom:4px;
  }

另一个解决方案（我最喜欢）
将使用DIV元素的CSS和z-index，就像 - 悬停父级我们动画内容（子）元素从下面

jsBin demo 2 - simple solution

这一点jQuery：

var $desc;
$('.userCard').hover(function(){  

  $desc = $(this).find('.description');
  $(this).css({zIndex:'3'});
   var t = setTimeout(function() {
      $desc.show('slow');
  }, 150);      
  $(this).data('timeout', t);   

},function(){
  $(this).css({zIndex:0});
  clearTimeout($(this).data('timeout'));
  $desc.hide();

});

HTML：

  <div class="userCard">
    <div class="initial">
      <img src="http://placehold.it/26x26/f7b" /><h2>User name 1</h2>
    </div>
    <div class="description">
      <div class="description_content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      In et neque quam, vel dapibus neque. Praesent rutrum ultricies sodales.       
      </div>
    </div>
  </div>

CSS：

  .userCard{
    position:relative;
    padding:10px;
    width:200px;
    margin:10px;
  }
  .initial{
    position:relative;
    cursor:pointer;
    z-index:2;
  }
  .userCard img{
    float:left;
    margin-right:10px;
    box-shadow: 1px 1px 3px -1px #999;
  }
  .description{
    background:#eee;
    position:absolute;
    top:0px;
    left:0px;
    padding:10px;
    clear:both;
    display:none;
  }
  .description_content{
    padding-top:37px;
    position:relative;
    width:200px;
  }

什么是这种网络效应

8 个答案:

jsBin demo

jsBin demo 2 - simple solution