JDX01(2017):Travel World(2)

範例結果

四、視窗捲動時,【section2】JS設定

參考:JS事件列表1(依事件對象分類)JS事件列表2(依字母列表)

練習1:JS設定 sec2 背景移動

//視窗捲動
$(window).scroll(function(){

  //sec2 背景移動  
    var $scrollPos = $(window).scrollTop();
      //console.log($scrollPos);
    $('#sec2').css('background-position-x',($scrollPos/2) + 'px');

});     //$(window).scroll end

練習2:物件隨身在側滑鼠上

S1:在段落中某一處加入下方結構,以利程式加入滑鼠目前所在位置

<span class="page"></span>

參考連結:【jQuery event.pageX 屬性】、【相關事件

$(document).mousemove(function(event){
    $("span.page").text("X: " + event.pageX + ", Y: " + event.pageY);
});

S2:CSS美化,當滑鼠離開則隱藏

#sec2{
  overflow: hidden;
  position: relative;
}

S3:寫入程式語法

S3-1:開始JS

// #sec2 滑鼠跟隨 airplane
  $('#sec2').append('<div class="move"></div>');
  var $sec2Top = $('#sec2').offset().top;
  var $nowX;

  $(document).mousemove(function(e){
    $("span.page").text("X: " + e.pageX + ", Y: " + e.pageY);
        
        if ( $nowX >= e.pageX){
          console.log(1);      
          $('.move').css({top:e.pageY-$sec2Top-60 ,left:e.pageX+60, transform: 'rotateY(180deg)'});

        }else{
          console.log(2);
          $('.move').css({top:e.pageY-$sec2Top-60 ,left:e.pageX-60, transform: 'rotateY(0deg)'});
          
        }
        $nowX = e.pageX;
        //console.log('2.$nowX'+$nowX,'e.pageX'+e.pageX);
  } // mousemove end

S3-2:調整JS

// #sec2 滑鼠跟隨 airplane
  $('#sec2').append('<div class="move"></div>');
  var $sec2Top = $('#sec2').offset().top;
  var $nowX;

  // 減少效能過渡
  $('#sec2').hover(
    function(){Fnsec2move();}
    ,function(){$(document).off("mousemove"); }
  );

  function Fnsec2move(){
    $(document).mousemove(function(e){
      $("span.page").text("X: " + e.pageX + ", Y: " + e.pageY);
          
          if ( $nowX >= e.pageX){
            console.log(1);      
            $('.move').css({top:e.pageY-$sec2Top-60 ,left:e.pageX+60, transform: 'rotateY(180deg)'});

          }else{
            console.log(2);
            $('.move').css({top:e.pageY-$sec2Top-60 ,left:e.pageX-60, transform: 'rotateY(0deg)'});

          }
          $nowX = e.pageX;
          //console.log('2.$nowX'+$nowX,'e.pageX'+e.pageX);
    } // mousemove end
  } // Fnsec2move end