原生js實現視差滾動效果（相似D3官網的效果），兼容IE

js視差效果

1.思路：

鼠標在圖片上上下左右滑動時,讓圖片總體轉動,轉動方向與鼠標移動的方向相同,轉動角度大小正相關於鼠標離開圖像中心點的水平或垂直距離，圖片轉動能夠用css3的：

transform:rotateX() rotateY();

實現,剩下的是求鼠標的位置圖片中心點的距離差，鼠標位置爲：

e.clientX; e.clientY //鼠標相對於屏幕可視區域的位置(不包括滾動條)

對於圖片中心點能夠先求圖片左上角相對於屏幕的位置座標，加上圖片寬高的一半便可求得。

2.求一個元素左上角相對於屏幕的位置

//獲取元素相對於屏幕絕對位置
        function getAbsPosition(element){
           var abs={x:0,y:0}
           //若是瀏覽器兼容此方法
           if (document.documentElement.getBoundingClientRect){
               //注意，getBoundingClientRect()是jQuery對象的方法
               //若是不用jQuery對象，能夠使用else分支。
               abs.x = element.getBoundingClientRect().left;
               abs.y = element.getBoundingClientRect().top;

               abs.x += window.screenLeft +
                           document.documentElement.scrollLeft -
                           document.documentElement.clientLeft;
               abs.y += window.screenTop +
                           document.documentElement.scrollTop -
                           document.documentElement.clientTop;
             }
           //若是瀏覽器不兼容此方法
           else{
               while(element!=document.body){
                   abs.x+=element.offsetLeft;
                   abs.y+=element.offsetTop;
                   element=element.offsetParent;
               }
            //計算想對位置
                abs.x += window.screenLeft +
                       document.body.clientLeft - document.body.scrollLeft;
                abs.y += window.screenTop +
                       document.body.clientTop - document.body.scrollTop;
              }
              return abs;
          }

此方法循環累加位置座標，直到父元素爲根元素。

function getCenterPosition(element){
          center={x:0,y:0}
          var leftTop=getAbsPosition(element[0])
          // console.log(leftTop)
          // console.log(element.css('width'),element.css('height'))
          center.x =  leftTop.x + parseInt(element.css('width'))/2
          center.y =  leftTop.y + parseInt(element.css('height'))/2
          return center
        }

獲取元素中心點的位置。

3.計算鼠標與元素中心點的距離差，使元素轉動

當鼠標在圖片上移動時,實時計算鼠標與元素中心點的距離差，通過比例換算，修改元素的transform

$(document).on('mousemove','.layerWrap',function(e){
            //console.log(e.clientX,e.clientY)
            CenterPosition = getCenterPosition($('.layer img'))
            moveY = (CenterPosition.x - e.clientX)/30
            moveX = 0-(CenterPosition.y - e.clientY)/27
            //console.log(moveX,moveY)
            $('.layerWrap').css('transform','rotateX('+moveX+'deg)'+''+'rotateY('+moveY+'deg)')
            $('.layerWrap').css('webKitTransform','rotateX('+moveX+'deg)'+''+'rotateY('+moveY+'deg)')
        })

便可看到效果。

源碼放在了github上面，歡迎star