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