文章有黄楚才呕心沥血，熬夜做成，转载请著名出处。
更多知识点请关注本人的域名的后期更新huangchucai.cn
装逼效果提前预览，仅限于门外汉看看就关闭窗口
banner跟随鼠标实现3d效果
点击查看完成demo的展示
实现思路分析
- 监听鼠标的移动位置
- 计算出鼠标移动后距离元素中心点的距离
- 移动的距离和3D变换的角度成线性关系。注意百分比的使用
函数的e/event对象
- 函数自带一个e/event对象，当传入实参的适合， 其实是个e/event对象传入一个参数。我们通过代码了来获取这个e/event对象。
$(document).ready(function(e){
$container=$(".container");
$container.on('click',function(e){
console.log(e);
})
})
我们会获得到和距离有关的几个参数，下面我们一一来讲解
e/event对象的屏幕参数
以下例子都是click事件下生成
- clientX,clientY 英语翻译是客户端的意思。表示鼠标点击的位置距离客户端的横纵坐标，不管浏览器是否出现滚动条，都是表示距离可以看到的页面的距离。
- offsetX,offsetY 偏移。表示鼠标点击位置最近的
div的距离。只要鼠标点击的位置距离最近元素左上角的横纵坐标。 - pageX,pageY 页面。表示鼠标点击的位置距离页面的横纵坐标，如果页面没有滚动条的情况下，
pageX,pageY==clientX,clientY。但是当页面出现滚动条的时候，就会有区别。pageX,pageY始终表示距离页面左上角的距离。 -
screenX,screenY 屏幕。表示鼠标点击的位置距离屏幕的左上角的横纵坐标。
client和page的区别
client和page的区别
client和screen的区别
jquery获取父元素相对于窗口的距离也可以通过原生js实现
- jquery的offset()方法(有2个属性，left,top)
var offset=$container.offset();
var container_x=offset.left;
var container_y=offset.top;
- jquery的width()获取元素的高度和宽度不包括元素的边框
var center_x=$container.width();
var center_y=$container.height();
- 我们来通过原生js来获取元素的高度
-
clientHeight和clientWidth属性
网页上的每个元素，都有clientHeight和clientWidth属性。这两个属性指元素的内容部分再加上padding的所占据的视觉面积，不包括border和滚动条占用的空间。
clientWidth和clientHeight都是只读属性，不能对它们赋值。
图解clientHeight和clientWidth属性-
scrollHeight和scrollWidth属性
网页上的每个元素还有scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积。
-
-
- 可以通过
document.body.clientWidthdocument.body.clientHeightdocument.body.scrollWidthdocument.body.scrollHeigh来获取页面宽度和高度，有没有滚动条是关键区别，没有滚动条，理论上是相等的 - 获取元素的位置
- 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)'
})
})
