JQuery 依滑鼠位置切換畫面樣式

測試環境
JQuery版本	jquery-1.11.1.min.js(jquery-2.1.1.min.js也可使用)
測試瀏覽器	Chrome36.0,Firefox31.0

是的今天要來介紹的是滑鼠移動到某個位置，畫面就會產生不同樣式的JQuery特效(因為也不知道叫什麼好就隨便取個標題了)
好接下來就進入正題了，首先我們先在body中建立一個P標籤，這個P標籤將作為顯示結果的地方

<p></p>

接著設定body的寬度跟高度，為什麼要設定這個呢?
因為本次實作是要偵測滑鼠在Body上的位置，body的寬跟高是跟隨著內容元件自動調整大小的，若是沒有設定的話
在顯示時可能會移動到某個區塊突然失效的現象發生

  body{
    width:100%;
    height:1000px;
  }

接下來就是要開始撰寫JQuery的部份了,詳情請參考程式碼中的註解

//畫面載入完成後執行
$(document).ready(function(){    
  //因為使用screen.width只會抓取第一次載入時的畫面寬度，
  //若有縮小或放大的話會造成Jquery特效失效所以不採用
  //var wid=screen.width;    
  //var hei=screen.height;    
  //宣告全域變數
  //畫面可視區域寬度
  wid= document.body.clientWidth;
  //畫面可視區域高度，此範例高度並無用處，只是順便寫出來
  //基本上畫面可視區域高度就等同於Body的高度
  //若將Body的高度設為1000px那麼,變數hei抓到的高度就會是1000px
  hei= document.body.clientHeight;
  //視窗若有變動就刷新wid跟hei的值
  $(window).resize(function() {
    wid= document.body.clientWidth;
    hei= document.body.clientHeight;
  });
  //滑鼠滑過區塊時執行
  $(document).mousemove(function(e){
      //將直寫入P標籤
      $("p").text("寬度:"+wid+"-高度:" + hei + "/"+ e.pageX + ", " + e.pageY);
      //若滑鼠目前所在的X軸位置大於可視畫面的一半就執行P標籤的CSS樣式修改
      if(e.pageX >=(wid/2)){
        $("p").css("background-color","#F00");      
      }else{
        //否則就回復原本的CSS樣式
        $("p").css("background-color","");
      }
    });  
});

接下來就讓我們看一下範例展示吧~!!

See the Pen saeql by jen (@jen_huang) on CodePen.

好的故事進行到這邊就告一段落了，希望能對各位有所幫助，謝謝
若是有疑問歡迎提出來。