返回顶部

收藏

Jquery仿微博名片

更多

用Jquery仿写微博名片,写得不好,望指点 Demo 源代码用法:引入CSS文件和jquery后, 在需要绑定的标签上加上class="bind_bm_hover_card" bm_user_id="userid"(用于查询用户信息,这个应该结合实际自行修改),例如:<a href="http://meego123.net" class="bind_hover_card" bm_user_id="1">调用:(ajax等动态内容变动可能需要重新绑定)<script type="text/javascript">$(function(){ bindHoverCard(); });</script>

Jquery

$(function(){
    bindHoverCard();
});
bindHoverCard=function () {
    var isHover = false;
    var showHoverCard,removeHoverCard,CurrentCard;
    var selector=$(".bind_hover_card");//要绑定的对象

    selector.live("mouseover", function () {
        if (CurrentCard) CurrentCard.remove();
        if (removeHoverCard) clearTimeout(removeHoverCard);
        if (showHoverCard) clearTimeout(showHoverCard);
        //显示名片
        showHoverCard = setTimeout(hoverCardBuilder($(this)), 300);
    });
    selector.live("mouseout", function () {
        if (!isHover) {
            clearTimeout(showHoverCard);
        } else if(CurrentCard) {
            removeCard();
            CurrentCard.hover(function () {
                clearTimeout(removeHoverCard);
            }, function () {
                removeCard();
            });
        }
        isHover = false;
    });
    //删除名片
    removeCard=function(timer){
        removeHoverCard = setTimeout(function () { CurrentCard.remove() }, timer||600);
    }
    //构建名片DOM
    hoverCardBuilder=function (hoverObject) {
        if (!isHover) {
            isHover = true;
            var bmHoverCard = $("<div>").addClass("bm_hover_card").css({ 
                                                        top: hoverObject.offset().top + hoverObject.height()-6,
                                                        left: hoverObject.offset().left-104+ hoverObject.width()/2});
            var bmHoverCardArrow = $("<div>").addClass("bm_hover_card_arrow");
            var bmHoverCardBorder = $("<div>").addClass("bm_hover_card_border");
            var bmLoading = $("<img>").attr({ "border": "0", "src": "images/transparent.gif" }).addClass("loading")
            var bmHoverCardBefore = $("<div>").addClass("bm_hover_card_before");
            var bmHoverCardContainer = $("<div>").addClass("bm_hover_card_container").html(bmHoverCardBefore);
            bmHoverCard.append(bmHoverCardArrow).append(bmHoverCardBorder).append(bmHoverCardContainer);                
            /**插入DOM**/
            $("body").prepend(bmHoverCard);

            CurrentCard=$(".bm_hover_card");

            /**获取数据
            *bm_user_id为用户id,用于查询用户信息
            **/
            if (hoverObject.attr("bm_user_id")) {
                $.ajax({
                    url:"./hoverCard.html",
                    type:"get",
                    data:{id:hoverObject.attr("bm_user_id")},
                    dataType:"html",
                    timeout:8000,
                    beforeSend:function(){
                        bmHoverCardBefore.html(bmLoading);
                    },
                    success:function(data){
                        bmHoverCardContainer.html(data);
                    },
                    error:function(){
                        bmHoverCardBefore.html("读取错误");
                    }
                });
            } else {
                bmHoverCardBefore.html("缺少查询参数");
            }
        }
    }
};

asdasd.png

imgs/asCode/31001509_gKkL.png

标签:jQuery

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. Leon 发表 2018-07-06 14:28:07 jquery比较相同元素的高度并获取最高值
  2. 廖雪峰 发表 2017-11-11 10:58:00 使用jQuery实现图片懒加载原理
  3. 博主 发表 2018-05-16 00:12:00 jQuery - 回车发送消息提交表单
  4. 博主 发表 2012-05-24 00:00:00 10 个技巧助你写出卓越的 jQuery 插件
  5. 博主 发表 2013-11-25 00:00:00 高效 jquery 的奥秘
  6. 博主 发表 2013-11-25 00:00:00 高效 jquery 的奥秘
  7. 博主 发表 2013-11-25 00:00:00 高效 jquery 的奥秘
  8. Flying 发表 2015-08-13 16:45:59 使用ocLazyLoad实现AngularJS模块按需懒加载
  9. 王思捷 发表 2016-09-06 15:20:59 Underscore对于object的extend之坑
  10. Leon 发表 2018-03-28 14:10:00 本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效
  11. 博主 发表 2017-09-28 01:50:55 jQuery 性能优化技巧
  12. 博主 发表 2013-07-29 00:00:00 jquery add element in the html dom

发表评论