HTML 简单拼图游戏

先不废话，请看演示。公司要搞这么个微信活动，可现在没有前端开发，没办法，身为打杂总监只好临时顶下这个空缺了。先找了一些 JS 代码，试用了下都不太理想，好一点的写的又太复杂，改起来有难度，干脆撸起袖子自己干了。基本需求有一个固定区域，被拆分成 c*r 个同等大小的碎片，拿走其中一块，靠近缺口的块可以向缺口方向移动；当拼出原来的图样视为完成。依照此需求，需要经历 加载图片-》

业界 2016年06月22日

如何用 JavaScript 下载文件

简介我们知道，下载文件是一个非常常见的需求，但由于浏览器的安全策略的限制，我们通常只能通过一个额外的页面，访问某个文件的 url 来实现下载功能，但是这种用户体验非常不好。幸好，HTML 5 里面为 标签添加了一个 download 的属性，我们可以轻易的利用它来实现下载功能，再也不需要用以前的笨办法了。原理我们先看看 download 的使用方法：Download fi

业界 2016年07月03日

H5打造3d场景不完全攻略（一）: H5 3d表现形式

前言日前，taobao造物节H5放肆地火了一把。相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到。工作之余体验了若干个3d H5页面，感觉这类的H5互动体验性明显要比普通的要强，把二维的物体转化成三维，能给人一种置身其中的感觉。所以，一个好的idea加上低成本的技术实现——将3d融入H5今后也许还会爆发出更大的能量。3D在H5中的表现形式话不多说，直接贴几个链接

业界 2016年08月06日

【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器

用 DIV + CSS3 画小黄人仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各个细节的形状，当然也不会使用任何图片哦。那就没意思了。[br]有的同学说，用canvas不是能画得更逼真而且更简单吗？这点我也非常赞同，但我的理由还是，那就没意思了。这次用到了一些LESS的特性，通过设置一些指定的参数来生成不同种类、不同身材的小黄人。GitH

业界 2016年05月10日

WeX5的正确打开方式（3）——绑定机制

今天整理一下WeX5的绑定机制。原生的问题假设我们做一个订单系统，需要显示商品单价，然后可以根据输入数量计算出总价并显示出来。使用原生代码也很容易实现，效果：         Account: [br]sum://js codevar priceNode = document.getElementById('price'),accountNode = document.ge

业界 2016年06月29日

HTML语义化

近来看面试题的时候，经常看到一个问题：HTML语义化是什么意思？w3school里面有html标签的含义。然而HTML5中对一些标签进行了修改，由于不了解H5的新定义，就很容易弄错标签之间的意思。例如：既然i标签是指斜体的意思，那么为什么font-awesome这类字体要用i标签呢？这不是反语义化了吗？除此之外，em和strong都是有强调的意思，又有什么区别呢？可能这个时

业界 2016年07月05日

基于Nuclear的Web组件-Todo的十一种写法

刀耕火种刀耕火种是新石器时代残留的农业经营方式。又称迁移农业，为原始生荒耕作制。var TodoApp = Nuclear.create({add: function (evt) {evt.preventDefault();var textBox = this.node.querySelector('input');this.option.items.push(textBo

业界 2016年05月16日

CSS3 聊天气泡框以及 inherit、currentColor 关键字

效果如上图所示，主要用到CSS3的伪类::after、::before，以及圆角边框border-radius属性。对于下面的气泡框，可以有两种方式实现小三角：传统方式，利用CSS画小三角，利用到了透明背景和边框属性transparent的应用。CSS3的transform属性的使用然后通过position定位到合适的位置。此外，本文还会讲一下CSS的inherit属性值的

业界 2016年07月21日

IOS中弹出键盘后出现fied失效现象的解决方案

概述 这个问题常出现在移动web开发中聊天或者留言页面的绝对定位输入框上，页面超过屏幕大小时候输入框focus状态下（键盘弹出）绝对定位的元素失效，导致页面滚动时候把定位元素一并带走，体验十分不好，在此留下一自己的方法，让更多的人不需要再爬这样的小坑。 解决方法 原理很简单，就是定义一个外框把页面包起来，把需要使用fixed定位的元素设置成absolute定位，然后设置外框

业界 2016年07月04日

H5项目常见问题及注意事项

Meta基础知识：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面//一、HTML页面结构// width 设置viewport宽度，为一个正整数，或字符串‘device-width’// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置// initial-scale 默认缩放比例，为一个数字，可以带小数// min

业界 2016年07月06日