小案例 判断鼠标进入容器方向
$("div").on("mouseenter mouseleave",function(e) { var w = $(this).width(); // 得到盒子宽度 var h = $(this).height();// 得到盒子高度 var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); // 获取x值 var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); // 获取y值 var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左” // 将点的坐标对应的弧度值换算成角度度数值 var dirName = new Array('上方','右侧','下方','左侧'); if(e.type == 'mouseenter'){ $(this).html(dirName[direction]+'进入'); }else{ $(this).html(dirName[direction]+'离开'); } });
判断鼠标进入容器方向
原理代码：
以div容器的中心点作为圆心，以高和宽的最小值作为直径画圆，将圆以[π/4，3π/4)，[3π/4，5π/4），[5π/4，7π/4)，[-π/4，π/4)划分为四个象限，鼠标进入容器时的点的atan2(y,x)值在这四个象限里分别对应容器边框的下，右，上，左。
计算x坐标值时，如果点原来的x坐标的绝对值大于圆的半径值，则按 h/w 这个比例进行缩小，使得到的点的位置在容器的边界位置所对应的象限区间里。 y 坐标的计算也是一样。
1.4 视距 perspective
近大远小
perspective 属性定义 3D 元素距视图的距离，以像素计，用于设置透视/景深效果。
一定要注意：
- 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
透视效果是写在父亲身上。 - perspective 属性只影响 3D 转换元素。
- perspective取值为none或不设置，就没有真3D空间。
- perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。
- perspective的值无穷大，或值为0时与取值为none效果一样。
例：
perspective=200px
perspective属性，经常和translateZ的结合起来使用。
1.4.1 perspective-origin属性
主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置，在该位置观看者好像在观看该元素的子元素。 灭点 消失点
注意：
1.该属性的默认值为“50% 50%”(也就是center)
- perspective-origin属性必须定义父元素上
例：perspective-origin:bottom /*以下部为源点*/
1.4.2 transform-style属性（重点）
transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat（平面的）和preserve-3d。[pri’z3:rv]
其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
preserve 保持原状
网友评论