- 博客(162)
- 收藏
- 关注
RSS订阅原创 能看懂这10个JavaScript难点的程序员运气不会太差…
为了保证可读性，本文采用意译而非直译，并且对示例代码进行了大量修改。另外，本文版权归原作者所有，翻译仅用于学习。1. 立即执行函数立即执行函数，即Immediately Invoked Function Expression (IIFE)，正如它的名字，就是创建函数的同时立即执行。它没有绑定任何事件，也无需等待任何异步操作：(function() { // 代码 // ...
2019-08-13 16:59:48
665
原创 HTML5 手势检测原理和实现
手势常用的 HTML5 手势可以分为两类，单点手势和两点手势。单点手势有 tap（单击），double tap（双击），long tap（长按），swipe（挥），move（移动）。两点手势有 pinch（缩放），rotate（旋转）。接下来我们实现一个检测这些手势的 javaScript 库，并利用这个手势库做出炫酷的交互效果。移动关于移动手势检测我们这里不再赘述。总结一下就是在每次t...
2019-08-13 16:59:42
1787
原创 CSS3 SVG实现可爱的动物哈士奇和狐狸动画
我想向大家展示如何巧妙地使用HTML、CSS排序动画和SVG滤镜把生活中可能最可爱的东西之一——动物画到网页上。我们将探讨绘制动物的两种技术：一种使用纯HTML和CSS，另一种使用内联SVG背景图像。所涉及的动画也很复杂，因此本教程将重点介绍创建这些动物以及栩栩如生的动作所涉及的不同技术。放飞你的创意，自行创作独特和俏皮的动物动画吧。话不多说，开始咯！塑造动物外形演示使用两种不同的技术来...
2019-08-13 16:59:34
1304
原创 2小时完成HTML5拼图小游戏
当时初学游戏开发，经验浅薄，所以没有好好专研游戏里的算法和代码的缺陷，导致游戏出现了很多bug，甚至拼图打乱后很可能无法复原。最近经常有朋友问起这个游戏，希望我能把代码里的bug改一下方便初学者学习，顺便我也打算测试一下自己写这种小游戏的速度，所以就抽出了一些时间将这个游戏从头到尾重新写了一遍，计算了一下用时，从准备、修改素材到最后完成游戏，一共用了大约2h的时间。这是我的游戏记录，欢迎各位挑战...
2019-08-13 15:30:01
1104
原创 HTML5 中的5大存储方式总结
总体情况h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。主要应用：购物车、客户登录对于IE浏览器有UserData，大小是64k,只有IE浏览器支持。目标解决4k的大小问题解决请求头常带存储信息的问题解决关系型存储的问题跨浏览器1.本地存储localstorage存储方式：以键值对(Key-Value)的方...
2019-08-13 15:29:59
881
原创 逼真的HTML5 3D水波动画 可多视角浏览
这是一款基于HTML5的3D水波动画特效，它的效果非常逼真，水池中的石头在水中沉浮，泛起了一层层水波。同时我们可以拖拽鼠标从不同的视角来浏览水池，3D效果非常不错。另外，我们可以按“G”键来让水池中的石头上下浮动，按“L”键添加灯光效果，设计相当完美。同时说明一下，这款3D水波动画是基于WebGL渲染技术的，大家可以了解一下WebGL。HTML代码<img id="xneg" src=...
2019-08-13 15:29:54
1602
原创 HTML5 3D衣服摇摆动画特效
这又是一款基于HTML5 Canvas的3D动画杰作，它是一个可以随风飘动的3D衣服摇摆动画特效，非常逼真。当我们将鼠标滑过衣服时，衣服将会出现摇摆的动画，点击鼠标时，衣服将会更加剧烈地摆动。HTML代码<div style="width:500px;margin:10px auto"> <canvas id="cv" width="480" height="300"&...
2019-08-13 15:29:52
1028
原创 HTML5 3D书本翻页动画
这是一款十分炫酷的HTML5 3D书本翻页动画，效果相对比较简单，拖拽鼠标模拟用手翻页，更漂亮的是翻页过程中，呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示，非常酷。HTML代码 <div class="back-cover p3d"> <div class="page back flip"></div> ...
2019-08-13 15:00:03
2140
1
原创 多视角3D可旋转的HTML5 Logo动画
这是一款基于HTML5和CSS3的3D动画特效，与之前的3D特效不同的是，这款是完全用HTML5特性实现的，而并非用多张图片叠加起来。这款3D动画还有一个特点是可以无限的旋转，从而可以从多个视角来观察HTML5 Logo。HTML代码<div class="link-overlay"></div><canvas id="canvas" style="bac...
2019-08-13 14:59:56
580
原创 HTML5超炫酷粒子效果的进度条
这是一款基于HTML5和JavaScript的进度条应用，这款进度条插件非常有特点，它在进度展示的时候呈现粒子的动画效果，也就是说，进度条在滑动的同时，会产生一些小粒子掉落下来，效果非常酷。另外还有一个特点是随着进度的变化，进度条的颜色也会变化。JavaScript代码/*========================================================*/ ...
2019-08-13 14:59:53
1515
原创 将 HTML5 性能发挥到极致
HTML5作为新兴领域越来越热。然而在移动设备硬件性能弱于PC的背景下，对性能的需求显得更为重要，而HTML5性能优化前与优化后有着极大的差别，如何优化才能提高性能，对此熟知的人很少。本文以LayaAir引擎为例，通过代码示例详细阐述如何利用引擎对HTML5作出性能的极致优化。主题包括：代码执行基本原理基准测试内存优化图形渲染性能减少CPU使用量其他优化策略第1节：代码执行基本...
2019-08-13 14:59:49
953
原创 如果你想成为一名程序员，这些建议可以帮助你走上正确的道路
如果你想成为一名程序员，这个建议可以帮助你走上正确的道路。程序员不是一个容易的职业，每年都有许多人从国内顶尖院校的计算机科学专业毕业，这是任何人都能从事的竞争最大的职业之一。同时，编程也是令人兴奋的。随着技术的进步，工业界每天都有创新。编程对于热爱它的人来说是一项充满激情的事业。当我 13 年前开始做程序员的时候，我希望有人能告诉我下面清单上的一切建议。这个清单可以为所有新手程序员节省大量的...
2019-08-12 21:59:53
1345
2
原创 注意！出现这十种症状，说明你不适合做程序员
学习是一件艰苦的事情。很多人想要成为程序员，在学习编程的过程中，面对各种 bug 和源源不断的问题，有时会对自己是否适合编程这一问题产生困扰。我经常看到这样的问题：「我如何知道我是否能成为一名程序员？」当有人在考虑职业方向，或者对软件开发感兴趣，并且对成为程序员需要做什么感到好奇时，不可避免地会出现这种问题。事实上，我认为这是一个很自然的问题。这有点像你想成为一个演员，你就会想知道你是否擅长...
2019-08-12 21:59:48
877
2
原创 精心收集的48个JavaScript代码片段，在Github上获得了3000多Star
该项目来自于Github用户Chalarangelo（文末有项目完整地址，原版为英文），目前已在Github上获得了3000多Star，精心收集了多达48个有用的JavaScript代码片段，该用户的代码可以让程序员在30秒甚至更少的时间内理解这些经常用到的基础算法，来看看这些JavaScript代码都传达出了什么吧！Anagrams of string（带有重复项）使用递归。对于给定字符串...
2019-08-12 21:59:43
339
原创 你相信程序员有洁癖这样的鬼话吗
如果你是一名程序猿，或是洁癖症、强迫症患者，以下图片可能会引起不适，请做好心理准备！1、这是一个有故事的HP笔记本。2、这是谁的屁股坐的？3、这只鼠标的主人很勤劳。4、请问这里是盘丝洞吗？5、这么结实的线，请问在哪买的？6、请问这是咋回事？7、这是个爱动手的电脑玩家8、这个键盘有点可怜9、索尼该哭了吧10、这个电脑是上个世纪的吧？...
2019-08-08 21:59:59
305
原创 多网站项目的 CSS 架构
复杂的 CSS 架构，可不是你在科班里能学到的东西。在本文中，我将与大家分享我在构建多网站架构领域中积累的知识和经验。附注：如今，正规的项目都会用到 CSS 预处理器。而在本文中，我会使用 Sass 预处理器。。用层构建世界在开始开发一个大型项目之前，我们应该放眼全局，把多个网站的共同之处提炼出来。高楼大厦始于一砖一瓦，而项目的基石就是样式规格化、混入（Mixins）、通用图标以及局部...
2019-08-05 21:59:57
581
原创 CSS Grid网格布局全攻略
所有奇技淫巧都只在方寸之间。几乎从我们踏入前端开发这个领域开始，就不停地接触不同的布局技术。从常见的浮动到表格布局，再到如今大行其道的flex布局，css布局技术一直在不断地推陈出新。其中网格布局(grid)作为css3的产物，它更加贴近网页设计师所使用的布局策略，学习并利用好它可以让我们免受很多布局困扰。虽然网格布局好处有很多，但学习起来并不简单，原因是用来设置布局的属性实在太多，其中光...
2019-08-05 21:59:54
2964
1
原创 搞懂 CSS 水平居中与垂直居中的16个方法
一、水平居中1.1 行内元素.parent { text-align: center;}1.2 块级元素1.2.1 块级元素一般居中方法.son { margin: 0 auto;}web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路 1.2.2 子元素含 float.parent{ wi...
2019-08-05 21:59:53
361
原创 web前端动画专题（3）：撩人的按钮特效
特效一览滑箱：果冻：脉冲：闪光：气泡：滑箱特效效果图原理因为 button 元素可以使用 before/after 伪元素，所以借助伪元素，可以实现动态图中的遮盖层。为了避免回流重绘，滑箱的运动方向是垂直方向，所以使用scaleY属性。对于动画的方向，需要借助transform-origin改变动画原点。代码实现html：<button>xin-t...
2019-08-04 13:04:38
1318
原创 web前端动画专题（2）：输入框特效
特效一览划线动态：动态边框：划线动态效果图原理和代码:before 和 :after伪元素指定了一个元素文档树内容之前和之后的内容。由于input标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。<div> <input type="text" /> <span></span>&l...
2019-08-04 13:04:31
538
原创 web前端动画专题（1）：字体特效
特效一览划线动态：背景高亮：色块进出：划线动态效果图原理首先，利用::after和::before就可以画出上下两条线，所以只需要一个 dom 元素即可。其次，对于鼠标移入的动画，要给上面两个伪元素设置:hover选择器。最后是处理动画方向。我们以上面的线条为例，在鼠标移入的时候，是从右到左变化的。这里是通过设置transform-origin属性来修改动画方向。下面的...
2019-08-04 13:04:25
2191
原创 前端开发岗位面试中常考的源代码实现
手动撸个call/apply/bind实现call来看下call的原生表现形式：function test(arg1, arg2) { console.log(arg1, arg2) console.log(this.a, this.b)}run.call({ a: 'a', b: 'b'}, 1, 2)好了，开始手动实现我们的call2。在实现的过程有个关键：...
2019-08-03 21:59:53
440
原创 CSS中字体单位：px、em、rem和%
对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具有重要性，在CSS3普及以来，更支持了一些方便好用的单位（px、em、rem…等），这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能更加得心应手。“网页”和“印刷”的单位若要把单位做区隔，最简单可以分为“网页”和“印刷”两大类，通常对于CSS来说只会应用到网页的样式，毕竟真正要做印刷，还是会倾向透过排版软件来进行...
2019-08-02 21:59:55
2288
原创 实现一个div的拖拽效果
实现思路：鼠标按下开始拖拽记录摁下鼠标时的鼠标位置以及元素位置拖动鼠标记下当前鼠标的位置鼠标当前位置-摁下时鼠标位置= 鼠标移动距离元素位置= 鼠标移动距离+鼠标摁下时元素的位置代码：class Drag { //构造函数 constructor(el) { this.el = el; //鼠标摁下时的元素位置 th...
2019-08-02 21:59:54
6016
2
原创 css左边竖条的实现方法
问题描述：在只使用一个标签的情况下实现左边竖线，通用标签与样式如下：实现左边竖线html:<div>实现左边竖线</div>css:.div1 { width: 200px; height: 50px; line-height:50px; text-align: center; b...
2019-08-02 21:59:52
10775
原创 css3常用动画+动画库
一、animates.cssanimate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画，包括：晃动，闪动，各种淡出淡出效果，如果你想快速的整合各种CSS3动画特效的话，使用它即可方便的实现。查看演示：https://daneden.github.io/animate.css/ github地址：http...
2019-08-02 21:59:30
521
原创 CSS 外边距(margin)重叠及防止方法
两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况：1、水平边距永远不会重合。2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方...
2019-08-02 21:59:25
601
原创 css 浮动布局，清除浮动
浮动的特性：（1）浮动元素有左浮动（float:left）和右浮动（float:right）两种（2）浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来（3）相邻浮动的块元素可以并在一起，超出父级宽度就换行（4）浮动让行内元素或块元素自动转化为行内块元素（此时不会有行内块元素间隙问题）（5）浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，...
2019-07-31 22:00:22
180
原创 把HTML转成PDF的4个方案及实现
在本文中，我将展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档。背景：几个月前，一个客户要求我们开发一个功能，用户可以得到 PDF 格式的 React 页面内容。该页面基本上是患者病例的报告和数据可视化结果，其中包含许多 SVG。另外还有一些特殊的请求来操纵布局，并对 HTML 元素进行一些重新排...
2019-07-31 21:59:58
3890
1
原创 纯CSS实现数据上报和HTML验证
一、纯CSS实现数据上报举个例子，要跟踪并统计某个按钮的点击事件：.button-1:active::after { content: url(./pixel.gif?action=click&id=button1); display: none;}.button-2:active::after { content: url(./pixel.gif?act...
2019-07-31 21:59:55
456
原创 HTML标签和JS中设置CSS3 var变量
一、HTML标签中设置CSS变量如下：<div style="--color: #cd0000;"> <img src="mm.jpg" style="border: 10px solid var(--color);"></div>直接正常CSS语句一样在style属性中设置即可。效果如下截图：二、JS中设置CSS变量如下，HTML示...
2019-07-30 21:59:53
3781
原创 HTML5 video视频播放
一、下面播报一则新闻Chrome 70已经原生支持HTML5 <video>播放时候Picture-in-Picture，也就是俗称的画中画技术，也就是很多视频网站看评论时候，播放视频变小挂在右下角的这种交互技术。我一瞅自己的Chrome浏览器，正好就是Chrome 70，体验了一番，挺有意思的，值得介绍下，以后估计用得着。二、先看画中画实例demo点击页面的切换按钮，或者右...
2019-07-30 21:59:50
9192
原创 纯CSS实现数据上报和HTML验证
一、纯CSS实现数据上报举个例子，要跟踪并统计某个按钮的点击事件：.button-1:active::after { content: url(./pixel.gif?action=click&id=button1); display: none;}.button-2:active::after { content: url(./pixel.gif?act...
2019-07-30 21:59:48
365
原创 CSS mix-blend-mode滤色screen混合模式
一、滤色screen混合模式速览screen混合模式，国内称为“滤色”，其计算公式是：公式中的C表示最终混合的RGB色值（范围是0-255），A和B表示用来混合的两个颜色的RGB色值（范围也是0-255）。从公式的内容可以看出，滤色混合模式的颜色，是将两个颜色的互补色的像素值相乘，然后除以255的互补色值。例如有一个红色，其RGB值是(255,0,0)，还有一个蓝色，其RGB值是(0,0,...
2019-07-30 21:59:46
2758
1
原创 HTML5的video和audio
从理论上来说，HTML5引入的和元素，使用起来和元素一样简单。对于支持HTML5的浏览器，不再需要使用插件（像flash）来在HTML文档中嵌入音频和视频：<audio src="background_music.mp3"'><video src="news.mov" width=320 height=240>实际上，使用这些元素的时候要更加巧妙。由于各家浏览器制造...
2019-07-30 21:59:42
2064
原创 CSS秀起来真没JS什么事
发现了一个纯CSS实现，具有渐变倒影和3D旋转效果的栅栏动画，他的实现方式是：利用10个<div>元素创建10个栅条，接着再复制整份<div>元素，并创建一个渐变遮罩形成渐变效果，以此作为栅栏的倒影。这听起来有点像用左脚的脚趾去抓你的右耳背部！更不用说这种渐变遮罩的方式根本不适用于非单一颜色的背景。难道没有基于CSS的更好的方法吗？答案是有的，我们有更好的方式可以实现...
2019-07-29 22:00:08
117
原创 CSS，给你点“颜色“看看
对于CSS颜色，想必大家都或多或少用过，本文是笔者整理的关于CSS颜色相关的一些基础知识，目的是希望在需要用到CSS颜色相关知识时，看这一篇就够了。下面多图预警，就是要给你一点“颜色“看看（偷笑ing）。本篇主要包含以下内容：CSS颜色体系包含哪些成员？HTML页面哪些属性可以设置颜色？CSS颜色体系中那些被忽略的王者成员总结闲话少说，我们开门见山：一、CSS颜色体系包含哪些...
2019-07-29 22:00:05
198
原创 趣味CSS3效果小汇总
众所周知，在CSS3中产生了诸多优秀的特性，现在就来分享一下我这段时间对于这些特性的效果实践，希望对大家有所启发。挑战1: 画一个对话框要画一个对话框，首先来学习做一个三角形。其实非常的简单。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n...
2019-07-29 22:00:02
358
原创 CSS 开发必知必会的 16 个调试工具技巧
大多数开发者基本都使用浏览器的开发者工具调试前端，但即使用了好几年 Chrome 的开发者工具，我仍然会遇到从未见过的技巧和功能。在本文中，我写了许多在开发者工具中与 CSS 相关的功能和技巧，我认为它们将把你的 CSS 开发水平提升至一个新的台阶。其中一些技巧不仅仅针对 CSS，但是我还是把它们放在了一起。一些是有关于工作流与调试的简单技巧，另一些则是最近几年推出的新功能。它们大多数基于 C...
2019-07-29 21:57:58
746
原创 CSS设置居中的方案总结-超全
块级元素居中 html代码部分<div class="parent"> <div class="child">child</div></div>行内元素居中 html代码部分<div class="parent"> <span class="child">child</span></...
2019-07-29 21:57:55
375
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人