文档章节

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

lotozhou
 lotozhou
发布于 2015/12/08 14:33
字数 513
阅读 148
收藏 3

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


© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
精选7款绚丽的HTML5和jQuery图片动画特效

在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器、图片导航、3D图片动画等等。本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面、实...

yykj
2012/11/14
39.5K
19
盘点6个时尚有用的 jQuery 和 CSS3 实例

很久以来,jQuery作为JS框架已经被大部分开发者所认同了,从而也诞生了不少让前端开发者兴奋的插件。然后随着CSS3的兴起,很多jQuery插件也都演变得符合CSS3标准,插件内容也更充实了,页面也...

yykj
2012/12/10
3.8K
6
程序猿必备的10款web前端动画插件十三

  1.jQuery圆形旋转切换菜单 带菜单项描述   jQuery有着无数的插件,菜单插件是jQuery插件中最多的,尤其是CSS3和HTML5的配合,让jQuery菜单变得更加丰富多彩。今天我们要给大家分享一款...

爱码农
08/30
0
0
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
10/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu16.04下安装docker

[TOC] 本文开发环境为Ubuntu 16.04 LTS 64位系统,通过apt的docker官方源安装最新的Docker CE(Community Edition),即Docker社区版,是开发人员和小型团队的理想选择。 1. 开始安装 1.1 由于...

豫华商
今天
10
0
使用XShell工具密钥认证登录Linux系统

如果你是一名Linux运维,那么Linux服务器的系统安全问题,可能是你要考虑的,而系统登录方式有两种,密码和密钥。哪一种更加安全呢? 无疑是后者! 这里我为大家分享用Xshell利器使用密钥的方...

dragon_tech
今天
8
0
day178-2018-12-15-英语流利阅读-待学习

“真蛛奶茶”了解一下?蜘蛛也会产奶了 Lala 2018-12-15 1.今日导读 “蛋白质含量是牛奶的 4 倍,并有着更低的脂肪和含糖量”,听起来诱人又美味的并不是羊奶或豆奶,而是你可能打死都想不到...

飞鱼说编程
今天
12
0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents

场景重现 npm install --verbose 安装依赖的时,出现如下警告 强迫症患者表示不能接受 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN......

taadis
今天
2
0
OSChina 周六乱弹 —— 你一口我一口多咬一口是小狗

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文 :分享Roy Orbison的单曲《She's a Mystery to Me》 《She's a Mystery to Me》- Roy Orbison 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
489
6

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部