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

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

更多知识点请关注本人的域名的后期更新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;

2. jquery的width()获取元素的高度和宽度不包括元素的边框

    var center_x=$container.width();
    var center_y=$container.height();

3. 我们来通过原生js来获取元素的高度
   • clientHeight和clientWidth属性
     网页上的每个元素，都有clientHeight和clientWidth属性。这两个属性指元素的内容部分再加上padding的所占据的视觉面积，不包括border和滚动条占用的空间。
     clientWidth和clientHeight都是只读属性，不能对它们赋值。
     图解clientHeight和clientWidth属性
     • scrollHeight和scrollWidth属性
       网页上的每个元素还有scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积。
4. 可以通过 document.body.clientWidth document.body.clientHeight document.body.scrollWidth document.body.scrollHeigh来获取页面宽度和高度，有没有滚动条是关键区别，没有滚动条，理论上是相等的
5. 获取元素的位置
   • 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)'
            })
        })