隨網頁捲軸捲動移位的浮動視窗........程式碼範例結果如右下角的浮動視窗 ↘
本小站下載：含 Bootstrap 3.3.7 ~ 4.3.1 & jQuery 1.11.3 ~ 3.4.1程式碼：主要看紅色字部份，或直接複製所有程式碼，另存成一個 html 檔來觀看使用唄 ^^
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>喵喵笨兔 の 喵喵的家~遊戲天地 - 網頁捲軸滾動式廣告(右下)</title> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <style type="text/css">
#abgne_float_ad {
display: none;
position: absolute;
}
#abgne_float_ad .abgne_close_ad {
display: block;
text-align: right;
cursor: pointer;
font-size: 12px;
}
#abgne_float_ad a img {
border: none;
}
div.bigDiv {
height: 3000px;
}
</style> <script type="text/javascript">
// 當網頁載入完
$(window).load(function(){
var $win = $(window),
$ad = $('#abgne_float_ad').css('opacity', 0).show(), // 讓廣告區塊變透明且顯示出來
_width = $ad.width(),
_height = $ad.height(),
_diffY = 20, _diffX = 20, // 距離右及下方邊距
_moveSpeed = 800; // 移動的速度
// 先把 #abgne_float_ad 移動到定點
$ad.css({
top: $(document).height(),
left: $win.width() - _width - _diffX,
opacity: 1
});
// 幫網頁加上 scroll 及 resize 事件
$win.bind('scroll resize', function(){
var $this = $(this);
// 控制 #abgne_float_ad 的移動
$ad.stop().animate({
top: $this.scrollTop() + $this.height() - _height - _diffY,
left: $this.scrollLeft() + $this.width() - _width - _diffX
}, _moveSpeed);
}).scroll(); // 觸發一次 scroll()
// 關閉廣告
$('#abgne_float_ad .abgne_close_ad').click(function(){
$ad.hide();
});
});
</script> </head> <body> <div style="height:1000px"></div> <div id="abgne_float_ad" >
<span class="abgne_close_ad">關閉 [X]</span>
<a href="http://vv0817.byethost3.com" target="_blank">
<img src="gif/logo.gif" title="喵喵笨兔 の 喵喵的家~遊戲天地" />
</a>
</div> </body> </html>