开关灯效果的jquery相册插件Album

来源:https://www.sucaihuo.com/js/1840.html 2017-04-28 11:11浏览(825) 收藏

带开关灯效果的jquery相册插件Album是一款效果非常棒的jquery特效,Album相册插件用法超简单,页面初始化的时间只写一行代码就行了,Album.set("#Album");,就算你不懂前端这块也不要紧,只把要相应的样式文件和jquery插件文件引入即可。。。
开关灯效果的jquery相册插件Album
分类:图片代码 > 图片墙 难易:初级
查看演示 下载资源 下载积分: 20 积分

首先引用文件

<link rel="stylesheet" href="style/style_home1.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/album.js"></script>

页面初始化的时间只写一行代码就行了,Album.set("#Album");,就算你不懂前端这块也不要紧,1.图片延迟加载2、jquery相册3、弹出层4、鼠标悬浮效果等

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)
		},
标签: 相册插件
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2