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

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

CSS:

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

HTML:

<body>
	<div id="bg"></div><!-- 長到會有捲軸的div -->
	<div id="advertisement">
		<span id="close_ad">關閉廣告</span>
		<a href="#/"><img src="ky.jpg" /></a>
	</div>
</body>

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