原生js實現(xiàn)視差滾動效果（類似D3官網(wǎng)的效果），兼容IE

xiaotianyi 發(fā)布于2019-08-21 17:29 / 1988人閱讀

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

js視差效果

1.思路：

鼠標在圖片上上下左右滑動時,讓圖片整體轉(zhuǎn)動,轉(zhuǎn)動方向與鼠標移動的方向相同,轉(zhuǎn)動角度大小正相關于鼠標離開圖像中心點的水平或垂直距離，圖片轉(zhuǎn)動可以用css3的：

   transform:rotateX() rotateY();

實現(xiàn),剩下的是求鼠標的位置圖片中心點的距離差，鼠標位置為：

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

對于圖片中心點可以先求圖片左上角相對于屏幕的位置坐標，加上圖片寬高的一半即可求得。

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;
          }

此方法循環(huán)累加位置坐標，直到父元素為根元素。

   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.計算鼠標與元素中心點的距離差，使元素轉(zhuǎn)動

當鼠標在圖片上移動時,實時計算鼠標與元素中心點的距離差，經(jīng)過比例換算，修改元素的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效果視差效果

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89573.html

JavaScript 資源大全中文版

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

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

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

Hydrogen 2019-08-02 11:46 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

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

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

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

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

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

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