html5

图片响应式与优化

图片的响应式的纯 html 实现可以借助 srcset 和 sizes 属性以及元素来实现。而且观察Chrome开发者工具的 Network项可以发现，任何时候当屏幕变化的时候，如果匹配到新的规则需要的图片改变了的话，浏览器会去加载需要的图片。demosrcset 和 sizes 属性srcset 属性接受一个或多个 image candidate string，每个值

业界 2016年07月17日

《每周一点canvas动画》——碰撞检测(1)

每周一点canvas动画代码文件在前面的几章中我介绍了一些动画效果，这些动画效果都相对基础。但是通过这些基础的动画形式和概念，你可以设计出更复杂的动画。本章将介绍在动画中相对来说比较难的物理概念——碰撞检测，当然，我并不是说这个概念在理解上有多难，而是其实现的过程，以及实现的方式上，比较考验你的脑洞。言归正传，本章主要内容：碰撞检测的方法几何体碰撞检测方法基于距离的碰撞检测

业界 2016年07月13日

又被事件冒泡坑了一把，这次要彻底弄懂浏览器的事件流

打算封装一个弹窗组件，做的时候忘记了考虑事件冒泡的因素，结果被坑得不要不要的。为了解决自己的问题，去查阅了不少资料，把事件流相关的知识都给总结一下。事件冒泡：一个简单，但是坑了我无数回的知识点！JavaScript与HTML的交互通过事件来实现。而浏览器的事件流是一个非常重要的概念。不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议，只需要知道在DOM2中规定的事件流包括了

业界 2016年07月13日

从零开始开发一款H5小游戏(一) 重温canvas的基础用法

本系列文章对应游戏代码已开源 Sinuous game。初衷从萌发写一个小游戏的想法到完成游戏开发用了大概一周的业余时间。这个过程积累了一些经验，也算是参透了一些游戏开发的原理。在这里打算写一个系列教程，讲述怎样从零开始开发一款小游戏。让新者少走弯路，快速入手。也能让自己总结反思，发现问题。在开始介绍如何写游戏前有必要重温一下canvas。它是本游戏的地基，建房子要快，首先

业界 2016年07月14日

html 不常用标签介绍

文本元素如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用元素来添加 Word Break Opportunity（单词换行时机）。英文单词过长时使用会根据浏览器的宽度适当的裁切换行。如果想学习 AJAX，那么您必须熟悉 XMLHttpRequest 对象。添加下划线，起到强调作用元素实际作用就是删除线；从语义上来看，表示不准确的删除元素实际作用就

业界 2016年07月14日

探索发现：CSS实现中文两端对齐

今天在搜索“CSS实现中文两端对齐”的解决方法时，偶然发现了这个hack：我遇到问题是：看不到效果，无论是英文还是中文，在IE和chrome下都不起作用。还好在StackOverflow上找到了解决方法：）样式：div.justify { 　　text-align: justify; width:200px; font-size:15px; color:red; 　　bo

业界 2016年07月14日

页面性能优化实践总结

页面性能优化学而不思则惘，思而不学则殆前几天接到一个页面效果优化的任务，边做边查阅了一些关于页面性能的资料。做完任务之后，抽空写了一篇总结，梳理一下思路，加深自己的理解。1. chrome的timeline先思考这样的一个问题：什么叫页面性能好？如何进行评判？直观上讲，我们通常会通过一个页面流不流畅来判断一个页面的性能好不好。但是开发中，总不能这么随意吧。1-1 fpsFP

业界 2016年07月14日

css使文字显示两行后显示省略号

本人喜欢把一些实用的东东拿过来，写成文章或者收藏起来。于是乎... 直接上代码： .article {color: # 000000;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all; }狠狠的点击，查看

业界 2016年07月14日

从零开始开发一款H5小游戏(三) 攻守阵营，赋予粒子新的生命

本系列文章对应游戏代码已开源 Sinuous game。每个游戏都会包含场景和角色。要实现一个游戏角色，就要清楚角色在场景中的位置，以及它的运动规律，并能通过数学表达式表现出来。场景坐标canvas 2d的场景坐标系采用平面笛卡尔坐标系统，左上角为原点(0,0)，向右为x轴正方向，向下为y轴正方向，坐标系统的1个单位相当于屏幕的1个像素。这对我们进行角色定位至关重要。Ene

业界 2016年07月14日