此插件可用于相册大图展示,可使图片放大、旋转全屏展示。
首页 /  web前端 /  JavaScript /  jQuery特效 / jquery仿QQ空间图片浏览功能特效(员某人)

1 4 531

jquery仿QQ空间图片浏览功能特效(员某人)

此插件可用于相册大图展示,可使图片放大、旋转全屏展示。

jquery仿QQ空间图片浏览功能特效(员某人)_图一

定义要展示的图片

<a class="imgviewbig" href="javascript:;"><img src="userimg/1.jpg.thumb.jpg.m.jpg" class="loaderunveil" data-src="userimg/1.jpg.thumb.jpg.m.jpg" data-num="0"></a>
     <a class="imgviewbig" href="javascript:;"><img src="userimg/2.jpg.thumb.jpg.m.jpg" class="loaderunveil" data-src="userimg/2.jpg.thumb.jpg.m.jpg" data-num="1"></a>
     <a class="imgviewbig" href="javascript:;"><img src="userimg/3.jpg.thumb.jpg.m.jpg" class="loaderunveil" data-src="userimg/3.jpg.thumb.jpg.m.jpg" data-num="2"></a>
     <a class="imgviewbig" href="javascript:;"><img src="userimg/4.jpg.thumb.jpg.m.jpg" class="loaderunveil" data-src="userimg/4.jpg.thumb.jpg.m.jpg" data-num="3"></a>

初始js函数

function startImgView(){
	//弹出照片相册div  
	jQuery("a.imgviewbig").click(function(){
		var cur = jQuery(this).children("img").attr("data-num");
		var status = jQuery(this).attr("data-status");
		if(status == 'comment'){
			var ps = 'li';
		}else{
			var ps = 'div.dongtai_p_m';
		}
		var imgAblum = [];
		jQuery(this).parents(ps).find("a.imgviewbig").each(function(i){
			var data_src = jQuery(this).children("img").attr("data-src");
			data_src = data_src.replace(".thumb.jpg.m.jpg","");
			data_src = data_src.replace(".thumb.jpg.b.jpg","");
			data_src = data_src.replace(".thumb.jpg","");
			var data_src2 = data_src+'.thumb.jpg';
			var data_img_href = jQuery(this).attr("data-href");
			var data_img_feedid = jQuery(this).attr("data-feedid");
			imgAblum[i] = [];
			imgAblum[i]['desc'] = '';
			imgAblum[i]['src'] = data_src;
			imgAblum[i]['src2'] = data_src2;
			imgAblum[i]['data_img_href'] = data_img_href;
			imgAblum[i]['data_img_feedid'] = data_img_feedid;
		});
		imgView.init(imgAblum, cur);
	});
	
	
	jQuery(".imgB").hover(function(){
		jQuery(".imgB .goPrev, .imgB .goNext, .imgB .bot").stop().hide().fadeIn(300);
	},function(){
		jQuery(".imgB .goPrev, .imgB .goNext, .imgB .bot").stop().fadeOut();	
	});
	
	//切换皮肤
	jQuery(".close_skin .skin_1").click(function(){
		jQuery(".close_skin .skin_2").removeClass("cur");
		jQuery(".close_skin .skin_3").removeClass("cur");
		jQuery(".close_skin .skin_4").removeClass("cur");
		jQuery(".close_skin .skin_5").removeClass("cur");
		jQuery(".close_skin .skin_6").removeClass("cur");
		jQuery(".close_skin .skin_7").removeClass("cur");
		jQuery(".close_skin .skin_8").removeClass("cur");
		jQuery(this).addClass("cur");	
		jQuery("#imgView_skin").attr("href", "style1/imgView.css");
		jQuery("#imgViewDetail_skin").attr("href", "style1/imgViewDetail.css");
	});
	jQuery(".close_skin .skin_2").click(function(){
		jQuery(".close_skin .skin_1").removeClass("cur");
		jQuery(".close_skin .skin_3").removeClass("cur");
		jQuery(".close_skin .skin_4").removeClass("cur");
		jQuery(".close_skin .skin_5").removeClass("cur");
		jQuery(".close_skin .skin_6").removeClass("cur");
		jQuery(".close_skin .skin_7").removeClass("cur");
		jQuery(".close_skin .skin_8").removeClass("cur");
		jQuery(this).addClass("cur");	
		jQuery("#imgView_skin").attr("href", "style2/imgView.css");
		jQuery("#imgViewDetail_skin").attr("href", "style2/imgViewDetail.css");
	});
	
	
	
	jQuery(".imgView_at_m h1 a").live("click", function(){ 
		jQuery(".imgView_at").hide();	
	});
	//关闭
	jQuery(".imgView_m .close").click(function(){
		jQuery(".imgView").hide();
		jQuery("html, body").css("overflow", "auto");
	});
}
下载所需:0 金币 下载 演示

[来源] http://yuanmouren.erlyun.com/p.php?id=14

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

容若 2017-10-27 14:28
10
送花
20积分一朵