jQuery example：floating frame

標題：jQuery範例練習

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<script type="text/javascript"> // 當網頁載入完 $(window).load(function(){ var $win = $(window), $ad = $('#player').css('opacity', 0).show(), // 讓廣告區塊變透明且顯示出來 _width = $ad.width(), _height = $ad.height(), _diffY = 20, _diffX = 20, // 距離右及下方邊距 _moveSpeed = 800; // 移動的速度 // 先把 #player 移動到定點 $ad.css({ top: $(document).height(), left: $win.width() - _width - _diffX, opacity: 1 }); // 幫網頁加上 scroll 及 resize 事件 $win.bind('scroll resize', function(){ var $this = $(this); // 控制 #player 的移動 $ad.stop().animate({ top: $this.scrollTop() + $this.height() - _height - _diffY, left: $this.scrollLeft() + $this.width() - _width - _diffX }, _moveSpeed); }).scroll(); // 觸發一次 scroll() }); </script>

說明：
jQuery做出浮動效果。
點此觀看完整例子