原生js实现视差滚动效果（类似D3官网的效果），兼容IE

xiaotianyi 发布于2019-08-21 17:29 / 1978人阅读

摘要：求一个元素左上角相对于屏幕的位置获取元素相对于屏幕绝对位置如果浏览器兼容此方法注意，是对象的方法如果不用对象，可以使用分支。

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效果视差效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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