女王控的博客

前端

116 篇文章

flex深入理解

语法 语法解构 CSS语法中的特殊符号的含义绝大多数就是正则表达式中的含义,例如单管道符|,方括号[],问号?,个数范围花括号{}等。具体说明: 首先是单管道符|。表示或者。也就是这个符号前后的属性值都是支持的。因此,下面这些语法都是支持的: 接下来是 … 这一部分。其中方括号 表示范围。也就是支持的属性值在这个范围内。我们先把方括号 内其他特殊字符去除,可以得到下面的语法: 这就是说,flex属性值支持空格分隔的… »

使用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 其中,… »

CSS数据上报和HTML验证

纯CSS实现数据上报 举个例子,要跟踪并统计某个按钮的点击事件: 此时,当我们点击按钮的时候,相关行为数据就会上报给服务器,这种上报,就算把JS禁掉也无法阻止。 点击页面的两个按钮,可以看到发出了如下的请求: 当然,我们可以统计的不仅仅是单击行为,hover行为,focus行为都可以统计,当然,还有很多其他方面的。例如: 不支持CSS3浏览器比例统计 例如,我的Chrome发出的图片请求地址就是: 类似的,我们可以检测支持其他一些CSS… »

如何disabled禁用所有表单input输入框元素

pointer-events:none和覆盖层方法的问题 经常会遇到需求,需要禁用div中或者form元素中一堆表单控件元素,如 , , 元素。 很多人用的下面这两种方法实现: 设置pointer-events:none,例如: 使用::before伪元素创建一个浮层该在所有的表单元素上,例如: 以上两个方向虽然可以让点击无效,但是并没有阻止键盘访问,也就是Tab键索引,或者回车都能触发表单行为,使用new FormData(form… »

0%