为你推荐

纯 CSS 实现大量小块儿绘制

现在做的项目是公司内部全部组要用的viewer库.Viewer需要的功能非常的多,其中的一个就是需要提供一些常用的绘图API功能,比如用户鼠标移动画箭头,画圈圈,高光选中文本等等。 目前遇到的挑战就是在canvas,svg,dom+ css 之间如何选择的问题,canvas绘图的方案已经有...

使用 JS 来动态操作 css ,你知道几种方法?

JavaScript 可以说是交互之王,它作为脚本语言加上许多 WebApi 进一步扩展了它的特性集,更加丰富界面交互的可操作性。这类 API 的例子包括WebGLAPI、CanvasAPI、DOMAPI,还有一组不太为人所知的 css API。由于...

如何较为优雅地实现新手引导功能?

早期的项目中晓衡遇到游戏终于要完成了,辛苦了一阵满以为可以稍微放松一下了,但策划、运营要求,增加一个他们认为非常“简单”且重要的功能: 新手引导 。回想起当年,接到这个任务时的感觉是手脚冒汗、天晕地暗、日月无光,游戏代码本来就千疮面孔,逻辑错综复杂,根本不知道该怎么下手?更困难的是,游戏本身功能和需...

CSS 渲染原理以及优化策略

提起 css 很多童鞋都很不屑,尤其是看到RedMonk2019ProgrammingLanguageRankings的时候,css 竟然排到了第七位。我们先来看看这张排行榜:从上面可以看出,CSS的地位已经今非昔比了。本节我们就来说说CSS 渲染以及优化 相关的内容,...

Tab切换以及缓存页面处理的几种方式

相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到。如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样。 使用动态组件,相信大家都能看懂(部分代码省略)//通过点击就可以实现两个组件来回切换<button@click="changeView">切换view</but...

常见web攻击手段总结

XSS就是攻击者在Web页面中插入恶意脚本,当用户浏览页面时,促使脚本执行,从而达到攻击目的。XSS的特点就是想尽一切办法在目标网站上执行第三方脚本。举个例子。原有的网站有个将数据库中的数据显示到页面的上功能,document.write("datafromserver")。但如果服务器没有验证数据类型,直接接受任何数...

解码 PNG 图片

解码PNG图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。图片的二进制数据可以从 <canvas> , <img> ,ObjectURLs,ImageURLs, Blob 对象上获取到。参见浏...
代码星球·2020-12-24

10道css综合面试问题

1.css sprite是什么,有什么优缺点将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。减少HTTP请求数,极大地提高页面加载速度增加图片信息重复度,提高压缩比,减少图片大小 2display:none;与visibility:hidde...
代码星球·2020-12-24

什么是<!DOCTYPE html>,以及其重要

什么是<!DOCTYPE html>?在html文档初,往往会有这么一句话<!DOCTYPEhtml>,那么它的意义是什么呢?它是html5标准网页声明,全称为DocumentTypeHyperTextMark-upLanguage,意思为文档种类为超文本标记性语言或超文本链接标示语言...
代码星球·2020-12-24

前端代码美化的艺术

原本只是想简单的聊一下代码格式化的问题,无奈本文拖沓了很久,在此期间,我又思考了很多,我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字,可能叫“代码美化”更贴切一点,但是本文的深度远没有标题那么宏大。在我看来,代码质量不仅体现在逻辑上,也要体现在形式上。尤其前端代码,在日渐复杂的单页面开发中,代码格式化不仅是为了...
代码星球·2020-12-24

为什么 VS Code 能迅速占领 JavaScript 开发者社区

首先,为了避免与微软的VisualStudioIDE发生混淆,这里先说明一下,VisualStudioCode(也即VSCode)是一款轻量级的编辑器,类似Atom或SublimeText。它的采用量节节攀升,迅速占领了开发者市场!2015年,微软推出了VSCode的第一个版本。在第二年的StackOverflow开发...

CSS3 简单的砸金蛋样式

实现样式:1、鼠标移入后,鼠标样式图标变为“锤子”。2、用户砸金蛋,锤子简单的扬起效果。3、砸碎金蛋,显示内容。 分析实现步骤:1、在html中插入一颗金蛋找一张静态图片或带一点效果的动态图,直接放入img标签即可。 2、鼠标移入,改变鼠标样式图标系统自带的鼠标样式就那几种,可以通过css修改,简单...
代码星球·2020-12-24

了解并使用 CSS 中的 rem 单位

今天我们深度了解一下 rem单位,这个单位目前已经得到了优秀浏览器的支持,并且有一些兼容方案来帮助你在低版本的IE 浏览器中的使用它。 可能在你使用收音机或者用其他音乐播放器之前,就已经听过“R.E.M.”这个词了。在这个乐队眼中,这个词是“浅睡眠时眼球的快速转动”的缩写,而在 ...

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

前几天遇到一个页面需求是这样的:一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。需求:没有文字,没有聚焦——点赞没有文字,聚焦——灰色发送有文字——红色发送如果用js实现,需要监听输入框的change和focus事件,比较麻烦。但是用css中的伪类就可以...

教你应付一个很恶心却常见的需求(点击自身以外的区域关闭自己)

做前端最难受的就是产品给的需求以及测试给的bug了,看待这个标题是不是有点蒙,这是什么需求,下面来解读下! 需求:如下图,点击已保存按钮弹出已保存列表,当点击屏幕其他区域要关闭这个下拉框,是不是很简单加点东西,但是点击这个下拉框内部的区域不能关闭下拉框)(原谅我里面没写东西你就当有东西,给个机会噻!),是不是...