文档章节

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

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

这是一款经典的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
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

基于cropper.js的图片上传和裁剪

项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求。 功能: 1:点击选择图片...

祈澈姑娘 ⋅ 05/17 ⋅ 0

jquery.jqzoom.js图片放大镜

看了京东的商品详情页的放大效果不错,然后自己也想扒拉扒拉,无奈某些网站的插件要会员充值收费,特此将搞到的干货晒出来,方便各位有需要人事。话不多说,看正文! 正文分割线——————...

anlve ⋅ 06/10 ⋅ 0

jQuery-File-Upload 使用文档(翻译)

最近要用到多图上传,准备使用这个插件,但是没搜到相关的文档,只有官方的文档,主要是以有道翻译和个人理解为主 可能会有一些问题,但是比看原文是方便一些. 使用文档 插件的基本信息 插件demo ...

employeeee ⋅ 05/14 ⋅ 0

JAVAWeb对ajax中get与post的使用

JAVAWeb对ajax中get与post的使用 01.使用背景及ajax的介绍 在进行javaWeb的开发中难免会遇到异步请求的情况,为了使网站局部的信息发生变化,而不影响整个页面的话,博主知道的也只用ajax了。...

meiqi0538 ⋅ 04/04 ⋅ 0

JavaWeb04-HTML篇笔记(三)

1.1 案例二:表格隔行换色的案例:1.1.1 需求: 对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的选择器】 基本过滤选择器: 如果样式...

我是小谷粒 ⋅ 05/08 ⋅ 0

Jquery实现京东tab切图

主要是用jquery实现tab切换,显示不同的内容。也可以用原生js实现,但是实现方式比较繁琐,这里暂时不写原生js实现。jquery相对代码少而且易于理解。 这里用了三种方式实装,在写的时候,发现...

Mrs_CoCo ⋅ 05/07 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

Spring JDBC使用方法

普通实现: 1、创建数据表customer。 可以使用任何数据库实现,在项目中要引入相应数据库驱动包并配置相应数据库连接。 2、创建Customer pojo。 Customer类的属性对应数据库的属性,除了为每...

霍淇滨 ⋅ 今天 ⋅ 0

Contos 7 安装Jenkins

Jenkins是一款能提高效率的软件,它能帮你把软件开发过程形成工作流,典型的工作流包括以下几个步骤 开发 提交 编译 测试 发布 有了Jenkins的帮助,在这5步中,除了第1步,后续的4步都是自动...

欧虞山 ⋅ 今天 ⋅ 0

revel

revel install go get github.com/revel/revelgo get github.com/revel/cmd create new app revel new git.oschina.net/zdglf/myapp run app revel run git.oschina.net/zdglf/myapp ot......

zdglf ⋅ 今天 ⋅ 0

49. Group Anagrams - LeetCode

Question 49. Group Anagrams Solution 思路:维护一个map,key是输入数组中的字符串(根据字符排好序) Java实现: public List<List<String>> groupAnagrams(String[] strs) { Map<Strin......

yysue ⋅ 今天 ⋅ 0

spring Email

使用spring发Email其实就是使用spring自己封装携带的一个javamail.JavaMailSenderImpl类而已。这个类可以当一个普通的java对象来使用,也可以通过把它配置变成spring Bean的方式然后注入使用...

BobwithB ⋅ 今天 ⋅ 0

spark 整理的一些知识

Spark 知识点 请描述spark RDD原理与特征? RDD全称是resilient distributed dataset(具有弹性的分布式数据集)。一个RDD仅仅是一个分布式的元素集合。在Spark中,所有工作都表示为创建新的...

tuoleisi77 ⋅ 今天 ⋅ 0

思考

时间一天天过感觉自己有在成长吗?最怕的是时光匆匆而过,自己没有收获!下面总结下最近自己的思考。 认识自己 认识另一个自己,人们常说要虚心听取别人意见和建议。然而人往往是很难做到的,...

hello_hp ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部