jquery 鼠标经过显示 信息小卡片

经常玩google plus 的，觉得它有一个效果真的很不错，如图：

鼠标经过用户名，就会显示这样的小卡片。虽然不是做前端的，不过对这一效果也研究了一下怎么实现。

<script>
$(document).ready(function(){
    $(function(){
        $(".userID").HoverCard();
    });

$.fn.HoverCard = function(){
    var id = 'user_info_card';
    var card = $("<div id='"+id+"'> </div>").appendTo("body");

    card.css({"position":"absolute"});
    
    var self = $(this); 
    self.hover(function() {
        var left = self.offset().left + 10;
        var top = self.offset().top + 20;
        card.css({"left":left});
        card.css({"top":top});
        card.html(value);
        card.show();
    },function() {
        card.hide();
    }
    );
    return this;
}
});
</script>

效果如下：

样式嘛先不管了。

 

转载于:https://www.cnblogs.com/yeelone/archive/2012/12/06/2804635.html