Laollaoaolao的博客

1.两栏布局 两栏布局的核心是左栏固定宽度，右栏宽度自适应 html结构为 <div class="outer"> <div class="left"></div> <div class="right"></div> </div> 方式一 左栏浮动+固定宽度 右栏宽度auto+margin偏移 .outer{ height: 500px; background-color:

这是我总结的前端学习思维导图 需要请自取

图片懒加载 原理:初始时给页面上的图片的src设置为空值或者javascript:;,给图片创建一个data-url属性,并将图片正确的url赋值给data-url属性,当图片到达浏览器视窗时,将data-url的值赋值给src属性,这样就达到了懒加载的目的; 实现懒加载前需要注意: 给html标签(当然其中就包括img)设置data-*属性,这个属性会被储存在dom的dataset属性中,它的属性名就是*(例如我给img标签设置data-url属性,那么可以在img元素内的dataset属性中找到名为

最近在复习js知识,看到了requestAnimationFrame这个API,就想着用这个API写一个小demo来练练手 首先介绍一下这个API吧 这是MDN文档的官方解释 window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行 大概意思就是浏览器会在单位时间内不断地重新渲染(这里为了方便理解其实说的不准确,可以了解一下浏览器的重绘

前端动画实现 最近实在太忙了,没有时间写博客,贴一波最近学的动画代码敷衍一下 演示地址 动画演示 实现下述动画效果: 控制小球匀速移动 控制小球暂停 控制小球动画终止 控制小球动画倒序播放 控制小球速度 <script> function animate({easing,draw,duration}){//动画函数 let start = performance.now(); let speed = 1 //倍速 //动画状态 let state = 'canc