訊息提示彈層滾動JQUERRY

風來了發表於2013-03-21
/*風*/
var Life={};
Life.pmLoad=function(){
	$.getJSON(`json.js`,
	 function(d){
		 if(d&&d.res==`ok`){
			 if(d.count>0){
				var arr=new Array();
				i=0;
				for( a in d.data ){
					var r=d.data[a];
					arr.push(`<div class="fuc_news" id="life_pm_`+r.logid+`">`);
					arr.push(`<span class="fc_tit">`);
					arr.push(`<span class="tit_l">【最新訊息】</span>`);
					arr.push(`<span class="tit_r" >X</span>`);
					arr.push(`</span>`);
					arr.push(`<div class="fc_con clearfixs">`);
					if(r.url&&r.url!=``){
						arr.push(`<a href="`+r.url+`" target="_blank" onclick="Life.pmClick(`+r.logid+`)">`+r.msg+`</a>`);
					}else{
						arr.push(`<a href="home.php?mod=space&do=pm&subop=view&touid=1#bottom" target="_blank" >`+r.msg+`</a>`);
					}
					arr.push(`</div></div>`);
					i++;
				}
				Life.Num=i;
				$(`#pmWrapHtml`).html(arr.join(``));
				Life.pmGo();
			 }
		 }
	 });
}
Life.pmClose=function(id){
	$(`#life_pm_`+id).hide();
}
Life.pmClick=function(id){
	$.get("index.php?r=pm/click&id="+id);
}
Life.pmGo=function(){
	var s_top=0;
	var s_p=0;
	var PmNum=0;
	//瀏覽器高度
	var browserHeight=$(window).height();
	//HTML高度
	var tmphtmlHeight=htmlHeight=Life.Num*98;
	//滾動外框高度
	var floatNewsBoxsHeight=browserHeight;
	var PmHtml=$(`#pmWrapHtml`);
	var PmWap=$("#pmWrap");
	
	$("#pmWrapHtml div.fuc_news").each(function(){
		tmphtmlHeight=tmphtmlHeight-98;
		$(this).css("top",tmphtmlHeight+"px");
		
	});
	PmWap.height(floatNewsBoxsHeight).show();
	PmHtml.css(`height`,htmlHeight+`px`).css(`top`,floatNewsBoxsHeight+`px`).animate({`top`:(floatNewsBoxsHeight-htmlHeight)+`px`},Life.Num*0.5*1000);
	//關閉層
	$("#pmWrapHtml div.fuc_news .fc_tit .tit_r").click(function(){
		var tParent=$(this).parent().parent();
		tParent.hide();
		s_p=tParent.index();
		PmNum++;
		tmphtmlHeight=Life.Num*98;
		for (var i=0;i<Life.Num;i++){
			tmphtmlHeight=tmphtmlHeight-98;
			if(i<=s_p){
				continue;
			}
			$("#pmWrapHtml div.fuc_news:eq("+i+")").animate({`top`:(tmphtmlHeight+PmNum*98)+`px`});
		}
	});
	//瀏覽器滾動
	s_top= PmWap.css("top");
	$(window).scroll(function(){
			var ss_top=parseInt(s_top);
			var sc_top=$(this).scrollTop();
			var su_top=ss_top+sc_top
			PmWap.css("top",su_top+"px")
	});
}
$(document).ready(function(){
	Life.pmLoad();
})

案例地址:http://download.csdn.net/detail/wljk506/5166607


相關文章