search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

[jQuery]隨著捲軸移動的廣告視窗

在一些大陸網頁常會看到有些廣告視窗是隨著你的捲軸移動

這種功能可以用jQuery實作出來,參考了網路上大大的做法,重新再實作一次讓整個畫面流暢一點

CSS:

#bg { height:3000px; }
#advertisement { display:none; position:absolute;}
#advertisement img {border:none;}
#close_ad{display:block;}

HTML:

	

javascript:

(document).ready(function(){  	var window = (window), //視窗物件  		ad = ('#advertisement').css('opacity',0).show(), //讓物件透明,並顯示出來,目地是一開始移動到定位時使用者看不到  		width = ad.width(), //取得advertisement寬度
		height = ad.height(), //取得advertisement長度  		diffX = 10, //廣告與右方邊距  		diffY = 10, //廣告與下方邊距  		speed = 800; //移動速度,花多少ms完成移動,越小越快  	  	//先將廣告移到定點  	ad.css({
		top 	: (document).height() , //移到最下面  		left	: window.width() - width - diffX , //移到右邊定點
		opacity : 1 //解除透明
	});
	
	//加上scroll和resize事件
	window.on("scroll resize", function(){  		//控制廣告移動  		ad.stop().animate({
			top: (this).scrollTop() + (this).height() - height - diffY,
			left: (this).scrollLeft() + (this).width() - width - diffX
		},speed);
	}).scroll();//啟動scroll
	
	//關閉廣告
	('#close_ad').click(function(){  		('#advertisement').hide();
	});
});
Categories: jQuery



熱門推薦

本文由 blogjohnsonluorg 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦