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