html5

页面性能优化实践总结

页面性能优化学而不思则惘，思而不学则殆前几天接到一个页面效果优化的任务，边做边查阅了一些关于页面性能的资料。做完任务之后，抽空写了一篇总结，梳理一下思路，加深自己的理解。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日

图片响应式与优化

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

业界 2016年07月17日

强势推荐：React Native Js 自动补全插件

在atom的包管理器中无意间发现一个非常有用的插件！值得大家拥有。看图说明一切。插件的名字叫：atom-react-native-autocomplete 插件下载与介绍地址： https://atom.io/packages/atom-react-native-autocomplete 关键字：react.js, html5, JavaScript, jsx

业界 2016年07月17日

nodejs中aja跨域和jsonp跨域

AJAX跨域获取数据1.前端代码： Document异步获取数据 var log=function (obj) { console.log(obj); } var get=document.getElementById('get'); get.addEventListener('click',function () {

业界 2016年07月17日

Canvas入门－利用Canvas画国旗

在这之前需要你懂得以下方法的使用：beginPath()moveTo()lineTo()closePath()具体用法可以参考我的上一篇文章 canvas入门－利用canvas制作一个七巧板矩形的绘制canvas提供了三种绘制矩形的方法：fillRect(x, y, width, height)绘制一个填充的矩形strokeRect(x, y, width, height)

业界 2016年07月17日

《每周一点canvas动画》——桌球运动(1)

每周一点canvas动画代码文件一本好的技术书籍往往都是由浅入深，本系列文章基本上也遵循这个原理。在上一章中我们介绍了高级的坐标旋转，并且通过它，我们实现了任意角度的碰撞反弹效果，它让物体与非水平和非垂直的面产生合乎情理的碰撞成为了可能。那么在本章我们继续深入的介绍另一个问题——物体与物体发生碰撞后应该如何处理？也许你会说，在前面的章节中我们不是已经介绍过物体与物体之间的碰

业界 2016年07月16日

书页效果

书页效果.book {position: relative;width: 200px;height: 248px;margin-left: 20px;border: 1px # eee solid;background-color: # fff;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2)}.book::after {positi

业界 2016年07月18日