DOM
田江
技术没有秘密,只有知道的人多了,才能把技术的作用发挥出来。
展开
-
web前端开发的各种坐标系,尺寸
//一、各种坐标系(坐标原点)//1)、可视区域(浏览器窗口中可以看到(网页)的区域)左上角//2)、页面左上角//3)、某个HTML元素的左上角//1)、以可视区域左上角为坐标系原点// event.clientX: 鼠标距离原点的x方向的坐标// event.clientY: 鼠标距离原点的y方向的坐标 //2)、以原创 2017-12-24 13:00:56 · 6846 阅读 · 0 评论 -
缓冲运动
示意图:核心:速度=(目标位置-当前位置)/固定值代码: *{ margin:0; padding:0; list-style: none } img{ position:absolute; width:100px; height:100px; }原创 2018-01-01 12:14:40 · 259 阅读 · 0 评论 -
原生js如何做一个链式运动,JavaScript怎么做鼠标跟随效果
示意图:代码: *{ margin:0; padding:0; list-style: none }原创 2018-01-01 10:16:53 · 832 阅读 · 0 评论 -
原始js做的贪吃蛇,如何用JavaScript做一个贪吃蛇游戏,贪吃蛇系列——01初级贪吃蛇_键盘的方向键,吃食物,撞墙死亡
示意图:代码: *{ margin:0px; padding:0px; } ul{ list-style:none; position:relative; width:600px; height:400px; background-color:green; } li{ position:ab原创 2018-01-01 11:12:32 · 1723 阅读 · 0 评论 -
如何用JavaScript做一个贪吃蛇游戏,贪吃蛇系列_01按钮控制蛇的方向
*{ margin:0; padding:0; list-style: none } .divClass{ position:absolute; width:20px; height:20px; background-color:pink; border-radius:50%; } #box{ pos原创 2018-01-01 12:23:24 · 463 阅读 · 0 评论 -
如何用JavaScript做一个贪吃蛇游戏,贪吃蛇系列_02自动走
*{ margin:0; padding:0; list-style: none } .divClass{ position:absolute; width:20px; height:20px; background-color:pink; border-radius:50%; } #box{ pos原创 2018-01-01 12:24:38 · 468 阅读 · 0 评论 -
如何用JavaScript做一个贪吃蛇游戏,贪吃蛇系列_03方向键控制方向
*{ margin:0; padding:0; list-style: none } .divClass{ position:absolute; width:20px; height:20px; background-color:pink; border-radius:50%; } #box{ pos原创 2018-01-01 12:26:05 · 1289 阅读 · 0 评论 -
getElementByXXX和querySelector的区别?
querySelector 属于 W3C 中的 Selectors API 规范 。而 getElementsBy 系列则属于 W3C 的 DOM 规范"都是JavaScript中获取HTML元素的方法,都能够完成DOM对象的获取,以下是区别:1、getXXXByXXX 获取的是动态集合,querySelector获取的是静态集合。简单的说就是,动态就是选出的元素会随文档改变,静态的不会,取出来之...原创 2018-06-12 11:54:31 · 1559 阅读 · 0 评论 -
页面的重排和回流(提升移动端网页性能)
一、重绘重排的概念:重绘的意思是:重新绘制,如:颜色发生变化, 重排(回流)的意思是:重新排列,即布局会受影响,如:用js动态改变了元素的宽或高,就会影响其它元素的位置,这叫重新排列。二、什么时候引起重绘,什么时候引起重排:1、重排(回流):回流这一阶段主要是计算节点的位置和几何信息,那么当页面布局和几何信息发生变化的时候,就需要回流。比如以下情况:页面一开始渲染的时候(这肯...原创 2019-08-05 20:38:21 · 1846 阅读 · 0 评论