• 2023-06-13碰撞测试
    <script>constdiv1=document.getElementById('div1')constdiv2=document.getElementById('div2')functionmove(domElement){domElement.onmousedown=function(e){constmouseX=e.clientX,mouseY=e.clientY,oldLeft=domEle
  • 2023-06-01JavaScript原生实现《贪吃蛇》
    概述JavaScript原生实现《贪吃蛇》,每吃掉一个食物,蛇的身体会变长,食物会重新换位置。详细贪吃蛇大家都不陌生吧~简单做一个。一、思路1.让我们的小蛇动起来2.随机生成食物3.每吃掉一个食物,蛇的身体会变长,食物会重新换位置html界面<divclass="face"><!--小蛇移
  • 2023-03-08获取元素到body顶部的距离,offsetTop和offsetParent,getBoundingClientRect
    最近在写一个可见曝光的sdk,是当元素显示在可见区域的时候才算作曝光,并上报给服务端。思路是在元素请求回来并渲染完成之后,计算元素距离document顶部的距离offset,当页面滚动
  • 2023-01-30图片懒加载
    前言影响网页性能最主要的因素应该属图片资源了,现在一张图片动不动几兆,如果一张页面有很多图片(像电商类网站),等页面上的图片全部加载完毕再显示在浏览器上的话,用户可能早就
  • 2022-12-18判断元素是否在可视区域
    前言在日常开发中,我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值(例如100px),从而实现一些常用的功能,例如:图片的懒加载列表的无限滚动计算广告元素
  • 2022-11-27野花--transform后用offsetLeft,offsetTop是不包含transform的值的
    如题:transform之后是不会影响到元素的offsetLeft和offsetTop值的,因此也可以理解为transform是不脱离标准流的,依然在原先的位置. 因此,transform也就无法实现图片跟
  • 2022-11-09元素的offsetWidth\offsetHeight、offsetLeft\offsetTop等等
    偏移量(offsetdimension)偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距)。以下4个属性可以
  • 2022-10-17原生js中offsetTop, offsetLeft与offsetParent的详细讲解
    简单说下:offsetTopoffsetTop:为只读属性。返回的是一个数字。它返回当前元素相对于其offsetParent元素的顶部内边距的距离。它等价于offsetTop==>元素到offsetPare
  • 2022-10-10【前端必会】适合首页的滚动过渡(CSS transition)
    背景经常看到一些首页的过渡效果不错,闲来无事,实现个基本效果直接上代码<body><divid="1"class="blockbuild-in-scale-up"><h1>Hello1</h1></div><divid="2"c