jQuery滑过头像图片展示个人信息效果

来源：互联网发布：java api 1.8英文版编辑：程序博客网时间：2024/05/16 07:37
这是一款经典的jQuery图片插件，同时，也可以是一款jQuery提示框插件。这款jQuery插件的功能是当你把鼠标滑过头像图片缩略图时，即可弹出头像对应用户的详细个人信息，弹出的标签虽然不大，但是还是能容纳很多个人信息的。
var Album = (function($){    function album(o){        this.int(o)    };    album.prototype = {        int: function(o){            var that = this;            this.aImg = $(o).find('img');            this._css = null;            this.iLoad = 0;            this.zoom = 1.5;            this.i=0;            this.ok = false;            this.aEm = $('em',$(o));            this.tLayer = null;            this.aImg.each(function(){                $(this).load(function(){                    that.iLoad++;                    if(that.iLoad==that.aImg.length&&!that.ok){                        that.pos(o);                    }                })            });            setTimeout(function(){                if(!that.ok){that.pos(o);}            },2000);        },        pos:function(o){            var that = this;            that.ok = true;            $('a',$(o)).each(function(){                var oP = $(this).parent();                var oS = $(this).siblings('.Album_info');                oP.css({'width':$('img',this).width(),'height':$('img',this).height()})                $(this).css({'top':oP.position().top,'left':oP.position().left});                $('em',this).css({'height':oP.height(),'filter': 'alpha(opacity=50)'});                if($(o).width()-oP.position().left>=$(this).width()*6){                    oS.css({'height':Math.round($(this).height()*that.zoom)+4,'left':oP.position().left-2,'right':'auto','padding-left':Math.round($(this).width()*that.zoom)})                }else{                    oS.css({'height':$(this).height()*that.zoom+4,'right':$(o).width()-oP.position().left-$(this).width()-2,'left':'auto','padding-right':Math.round($(this).width()*that.zoom),'text-align':'right'})                }                if(oP.position().top>=Math.round($(this).height()*(that.zoom-1)/2)&&$(o).height()-oP.position().top-$(this).height()>=Math.round($(this).height()*(that.zoom-1)/2)){                    oS.css('top',oP.position().top-Math.round($(this).height()*(that.zoom-1)/2)-2)                }else if(oP.position().top<Math.round($(this).height()*(that.zoom-1)/2)){                    oS.css('top',$(this).parent().position().top-2)                }else{                    oS.css('top',$(this).parent().position().top-Math.round($(this).height()*(that.zoom-1)+2))                }            });            this.showImg(o)        },        showImg: function(o){            var that = this;            $('li',$(o)).each(function(){                $('a',this).css({'visibility':'visible','display':'none'}).fadeIn(1000);            })            setTimeout(function(){                $(o).css({'background':'none'});                that.hover(o);            },1000)                 },        hover: function(o){            var that = this;            $('a',$(o)).hover(function(){                var oP = $(this).parent();                var oS = $(this).siblings('.Album_info');                $('em',this).hide();                if(that.tLayer){clearTimeout(that.tLayer);that.tLayer = null}                that.aEm.not($('em',this)).each(function(){                    if(!$(this).is(':visible')){                        $(this).fadeIn(200)                    }                });                oS.show().animate({width:$(this).width()*6-Math.round($(this).width()*that.zoom)+7},300);                that._css = {'top':oP.position().top,'z-index':$(this).css('z-index'),'width':$(this).width(),'height':$(this).height(),'left':$(this).css('left'),'right':$(this).css('right')};                if($(o).width()-oP.position().left>=$(this).width()*6){                    $(this).css({'right':'auto','left':parseInt(oS.css('left'))+2})                     }else{                    $(this).css({'right':parseInt(oS.css('right'))+2,'left':'auto'})                    }                $(this).css({'top':parseInt(oS.css('top'))+2,'width':$(this).width()*that.zoom,'height':$(this).height()*that.zoom,'z-index':$(this).css('z-index')+100})                   $(this).children('img').css({'width':$(this).width(),'height':$(this).height()})                             },function(){                $('.Album_info').hide().css({'width':'auto'}).stop();                $(this).css(that._css);                $(this).children('img').css({'width':that._css.width,'height':that._css.height})                that.tLayer = setTimeout(function(){                    that.aEm.fadeOut(200)                   },200)            })        }       }    return {        set: function(o){            new album(o)        }    }})(jQuery)
0 0