获取元素位置并且实现锤子手机效果

文章有黄楚才呕心沥血,熬夜做成,转载请著名出处。

更多知识点请关注本人的域名的后期更新huangchucai.cn


装逼效果提前预览,仅限于门外汉看看就关闭窗口

banner跟随鼠标实现3d效果

点击查看完成demo的展示

实现思路分析

  1. 监听鼠标的移动位置
  2. 计算出鼠标移动后距离元素中心点的距离
  3. 移动的距离和3D变换的角度成线性关系。注意百分比的使用

函数的e/event对象

  1. 函数自带一个e/event对象,当传入实参的适合, 其实是个e/event对象传入一个参数。我们通过代码了来获取这个e/event对象。
  $(document).ready(function(e){
        $container=$(".container");
        $container.on('click',function(e){
             console.log(e);
        })
  })

我们会获得到和距离有关的几个参数,下面我们一一来讲解

e/event对象的屏幕参数

以下例子都是click事件下生成

  1. clientX,clientY 英语翻译是客户端的意思。表示鼠标点击的位置距离客户端的横纵坐标,不管浏览器是否出现滚动条,都是表示距离可以看到的页面的距离。
  2. offsetX,offsetY 偏移。表示鼠标点击位置最近的div的距离。只要鼠标点击的位置距离最近元素左上角的横纵坐标。
  3. pageX,pageY 页面。表示鼠标点击的位置距离页面的横纵坐标,如果页面没有滚动条的情况下,pageX,pageY==clientX,clientY。但是当页面出现滚动条的时候,就会有区别。pageX,pageY始终表示距离页面左上角的距离。
  4. screenX,screenY 屏幕。表示鼠标点击的位置距离屏幕的左上角的横纵坐标。


    client和page的区别

    client和page的区别

    client和screen的区别

jquery获取父元素相对于窗口的距离也可以通过原生js实现

  1. jquery的offset()方法(有2个属性,left,top)
    var offset=$container.offset();
    var container_x=offset.left;
    var container_y=offset.top;
  1. jquery的width()获取元素的高度和宽度不包括元素的边框
    var center_x=$container.width();
    var center_y=$container.height();
  1. 我们来通过原生js来获取元素的高度
    • clientHeight和clientWidth属性
      网页上的每个元素,都有clientHeight和clientWidth属性。这两个属性指元素的内容部分再加上padding的所占据的视觉面积,不包括border和滚动条占用的空间。
      clientWidth和clientHeight都是只读属性,不能对它们赋值。
      图解clientHeight和clientWidth属性
      • scrollHeight和scrollWidth属性
        网页上的每个元素还有scrollHeight和scrollWidth属性,指包含滚动条在内的该元素的视觉面积。
  2. 可以通过 document.body.clientWidth document.body.clientHeight document.body.scrollWidth document.body.scrollHeigh来获取页面宽度和高度,有没有滚动条是关键区别,没有滚动条,理论上是相等的
  3. 获取元素的位置
    • clientleft:元素到边界的距离,有border属性的话,clientleft就是border的值
    • scrollleft:滚动条到元素边界的距离
    • offsetleft:元素距离父元素的左边界,如果父元素没有设置position为relation和absolute,就是元素到窗口的距离

offsetleft和offsetTop详解

首先,每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离。其中父元素必须是除了static的其他定位,否则就是相对于body

图解offsetleft和offsetTop

是否有定位很重要

本人研究上诉知识点的代码

e/event事件的4个位置属性
jquery的width()方法和有滚动条的时候e/event事件的4个位置属性的区别
js原生获取元素大小和位置
有滚动条后的clientWidth和scrollWidth的区别


代码中字符串的运用

字符串: 可以通过+把元素连接起来,通过引号和相邻的元素形成字符串,例如'deg*-percent_y'+deg中把deg*-percent_y和deg连接起来。

            $banner.css({
                'transform': 'rotateX('+deg*-percent_y+'deg)'+' rotateY('+percent_x*deg+'deg)'
            })
        })

推荐阅读更多精彩内容