jQuery example：floating frame

標題：jQuery範例練習

<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做出浮動效果。
點此觀看完整例子