女王控的博客

JS知识点

14 篇文章

RequestAnimationFrame的作用

原理 浏览器(如页面)每次要洗澡(重绘),就会通知我(requestAnimationFrame),而setTimeout貌似是多个独立绘制。 作用 统一的向下兼容策略 CSS3实现动画即高效又方便,但是对于PC浏览器,IE10+ CSS3实现,IE9-之流JS setTimeout实现,实现方式也是不统一,但是requestAnimationFrame跟setTimeout非常类似,都是单回调 为了统一代码,需要对IE9-的浏览器做下兼容性处理 简单的兼容(IE… »

treated as passive错误解决

Chrome和Safari浏览器preventDefault报treated as passive错误 其实这个问题出现有一段时间了,主要麻烦的是,以前没有,后来,Chrome和Safari浏览器升级了,然后出现这个错误,而且就在一个月前,Chrome浏览器还只是黄色的警告,现在直接就红色错误献上。 例如,随便新建一个空白页面,写上如下JavaScript代码: 然后在移动端模式下页面上点击滑来滑去记下,就可以看到一大堆错误: Intervention Unable to… »

使用canvas实现和HTML5 video交互的弹幕效果

canvas实现弹幕性能较好 从技术实现成本角度讲,要实现弹幕效果,最简单的方法就是DOM+CSS3控制,如果我们的弹幕效果比较简单,使用CSS3动画实现也不失为一个好的方法。 但是如果我们的弹幕数据量比较大,就像下面这种: 使用DOM来实现很容易卡成了80年代的拖拉机——一顿一顿的。 很显然,面对这种多元素的复杂动画,使用canvas实现是更加合适的,动画会流畅很多。 本文就将展示两个案例,使用canvas… »

鼠标无限移动 JS API Pointer Lock简介

简介 Pointer Lock API可以让你的鼠标无限移动,脱离浏览器窗体的限制! API 3个属性 Document.pointerLockElement Document.onpointerlockchange Document.onpointerlockerror 2个方法 Element.requestPointerLock() Document.exitPointerLock() 2个事件 pointerlockchange pointerlockerror 其中,… »

JS前端创建html或json文件并浏览器导出下载

HTML与文件下载 如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: 但显然,如果纯粹利用HTML属性来实现文件的下载(而不是浏览器打开或浏览),对于动态内容,就无能为力。 例如,我们对页面进行分享的时候,希望分享图片是页面内容的实时截图,此时,这个图片就是动态的,纯HTML显然是无法满足我们的需求的,借助JS和其它一些HTML5特性,例如,将页面元素转换到canvas… »

0%