在一些大陸網頁常會看到有些廣告視窗是隨著你的捲軸移動
這種功能可以用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();
});
});