室內設計2:其他應用

範例結果

四、加入右側的【#AD】廣告

S1:加入html結構

<div class="ADmenu"></div>

S2:加入CSS美化

/*.ADmenu===============================================*/
.ADmenu{
  z-index: 101;
  width:80px; height:300px; background:url(../images/AD1.png);
  position:absolute; right: 0; top:100px; cursor: pointer;
}

S3:利用Click出現【#AD】廣告

//S6:AD click事件
  var IO = true;
  var $AD = $('.ADmenu').click(function () {
    if (IO) {
      $AD.animate({width:310},1000,function(){
        $(this).css('background','url(images/AD2.png)');
      });
    } else {
      $AD.animate({width:80}, 1000,function(){
        $(this).css('background','url(images/AD1.png)');
      });
    }
    IO = !IO;
  });

S4:當【scroll】捲動畫面時【#AD】跟著捲動在側

//S9:AD scroll事件
  $(window).scroll(function(){
    $AD.stop().animate({
      top: $(this).scrollTop() + $AD.height(),
    }, 800);
  });

參考連結:jQuery scroll() 方法