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

xiaotianyi 發布于2019-08-21 17:29 / 1980人閱讀

摘要：求一個元素左上角相對于屏幕的位置獲取元素相對于屏幕絕對位置如果瀏覽器兼容此方法注意，是對象的方法如果不用對象，可以使用分支。

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

云服務器 GPU云服務器視差滾動效果 js 視差效果原生js效果視差效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89573.html

JavaScript 資源大全中文版

摘要：官網全新的靜態包管理器。官網一個整合和官網的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。官網小巧的兼容的所見即所得的富文本編輯器。官網富文本編輯器。官網由制作，適用于每天寫作的富文本編輯器。 1. 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。 npm：npm 是 javascript 的包管理器。官網 cnpm：cnpm 是由于國...

jzman 2019-08-23 17:18 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0
GitHub 值得收藏的前端項目[每月更新...]

摘要：也是一款優秀的響應式框架站點所使用的一套框架為微信服務量身設計的一套框架一組很小的，響應式的組件，你可以在網頁的項目上到處使用一個可定制的文件，使瀏覽器呈現的所有元素，更一致和符合現代標準。 GitHub 值得收藏的前端項目整理與收集的一些比較優秀github項目，方便自己閱讀，順便分享出來，大家一起學習，本篇文章會持續更新，版權歸原作者所有。歡迎github star與fork 預...

maxmin 2019-08-29 16:07 評論0 收藏0