原生javascript写的小游戏《Flappy Pig》

2014-03-23 · 771 chars · 4 min read

Flappy Pig,是 Pig,使用原生 javascript 写的网页版“Flappy Bird”。我也奇了个怪为什么搞这个东西出来,而且还花了一天宝贵的周末,但是既然写出来,就拿出来和大家分享一下,点击在线试玩(没有做兼容性测试,所以请用现代浏览器)。

整个程序,主要分几个部分:全局设置和工具函数,pig 类(控制猪的跳跃,掉落等),柱子类(渲染柱子,控制柱子移动),位置判断(判断 pig 有没有撞到柱子上),controller(控制器,初始化各个类,全局设置,计时器的开始和结束,UI 控制等),主函数(程序起点),接下来说下程序的几个难点:

简单的搭建局域网内网站

2014-03-12 · 549 chars · 3 min read

在工作中常常会遇到这样的情况:

  • 你写完静态页,需要给产品审核确认
  • 你的站点环境部署比较麻烦,同事在自己的电脑上部署困难较大
  • 你实现了一个 wap 站点,需要使用手机访问以进行测试
  • 你的同事需要调用你的接口,但是他没有部署 asp.net 或者 php 的环境
  • ……

此时,如果你可以在自己的电脑上简单的部署一个站点,让公司内的同事或者手机 wifi  直接通过你的 IP 访问,会带来极大的方便。下面简单讲讲基于 IIS 搭建通过 IP 访问的局域网站点。

CSS实现文本溢出自动截断

2014-03-08 · 262 chars · 2 min read

在 web 前端开发中,经常要处理的一种情况就是“文本溢出”。比较友好的处理方式是溢出的文本不显示,在末尾加上“…”。实现方式多种多样,可以直接后端程序截断,前端 js 截断或者 CSS 实现截断。下面介绍 CSS 截断的方法。

带进度条的图片预加载效果

2014-03-07 · 227 chars · 2 min read

所谓的“图片预加载”就是先加载一张不清晰的图片,然后加载一张高清图片,实现由模糊到清晰的渐变。防止页面空白影响用户体验。具体效果请看在线演示

原理其实很简单,使用两张图片实现:一张小的缩略图,一张大的高清图,将缩略图拉大到高清图的尺寸(这就是模糊的效果),然后加载高清图片,加载完成修改<img>标签的 src。

CSS的word-wrap属性

2014-03-03 · 219 chars · 2 min read

接着上一篇word-break,继续说说 CSS 的换行。

这次说的word-wrap,同样是设置换行的,他有两个可能的值:

  • normal
  • break-word

做了个Demo,大家可以打开自己看看。

CSS的word-break属性

2014-03-02 · 592 chars · 3 min read

要了解 CSS 的换行,先要明白两个概念:“CJK 文本”和“non-CJK”文本,CJK 代表的就是中文(Chinese)、日文(Japanese)和韩文(Korean)等亚洲语言,non-CJK 就是指非亚洲语言(英语之类的)。

CSS 的word-break指定怎样在单词内断行。他有下面几个值:

  • normal(默认)
  • break-all
  • keep-all

下面一个一个解释:

关闭 Kindeditor for wordpress 的过滤模式

2014-02-28 · 314 chars · 2 min read

有的时候需要直接在 Kindeditor 中写代码,例如<code>标签,编辑器本身没有这个功能的(注意“插入程序代码”是<pre>不是<code>),但是你切换“HTML 代码模式”直接写代码的时候,很多 HTML 标签和属性会被过滤掉,这就是所谓的“过滤模式”,官网有如果关闭过滤模式的文档,但是没有针对 wordpress 插件的。经过一番寻找终于修改成功,方法如下: