| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
8年前发布

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

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

这是一款经典的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)

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1449843773004.html
jQuery 图片展示jQuery插件 jQuery插件