摘要： 一、预加载 前面做了个招聘页面，里面有大量的图片需要加载。 一开始都是全部写在页面中，在测试环境还看不出很慢，一放到正式环境就不对了。 微信浏览器本来就觉得慢，现在一下子要加载这么多图片，一下子就把屏幕弄白了，过了几十秒后才会完整的出现Loading图片。 这显然是无法忍受的，马上就加了预加载的功能 阅读全文

摘要： 以前就听说过有个库，叫animate.css，但是自己并没有在实际项目中使用过，这次正好要做个招聘页面，得以利用一下这个库，在经常会卡顿的UC浏览器中也能流畅执行。 扫描下面的二维码，可以看到在线的demo页面： 如果对CSS3动画的一些基础概念不是很熟悉，可以参考《CSS3中的动画效果记录》。 一 阅读全文

摘要： 一、榫卯 榫卯（sǔn mǎo），是古代中国建筑、家具及其它器械的主要结构方式，是在两个构件上采用凹凸部位相结合的一种连接方式。 若榫卯使用得当，两块木结构之间就能严密扣合，达到“天衣无缝”的程度，并且不用钉子。 下面这张图来自于山西悬空寺，屋檐下面的那些都是用榫卯做成的，没有用一颗钉子。 二、Ja 阅读全文

摘要： <canvas> 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。 兼容性方面，除了一些骨灰级浏览器IE6、IE7、IE8等，大部分现代浏览器都能支持。 一、属性与方法 1）属性 <canvas> 看起来和 <img> 元素 阅读全文

摘要： 在Google搜关键字“slider”或“swiper”能找到一大堆相关插件，自己造轮子是为了能更好的理解其中的原理。 给这个插件取名为“veSlider”是指“very easy slider”非常简单的一个滑动插件。 这只是个半成品，仅仅实现了手指滑动、自动轮播、跳转等基本功能。代码撑死了200 阅读全文

摘要： 一、timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function，只是注意到自定义贝塞尔曲线。 1）一个项目中的实例 先来看看左边加了steps和右边没加的区别。左边的是一锤一锤的，右边会出现影子。 【注意下面这个demo在firefox 阅读全文

摘要： 我在开发前端的时候曾经会有几个疑惑： 1）拿到的设计搞的宽度是640px或750px的，在页面不同尺寸屏幕布局的时候怎么换算。 2）移动端布局是用%、px、rem、伸缩盒 Flexible Box Layout还是多列Multi-column。 3）用px设置了字体大小，但是在ipad上面显示的却很 阅读全文

摘要： 这是一种全新的布局，在移动端非常实用，IE对此布局的相关的兼容不是很好，Firefox、Chrome、Safrai等需要加浏览器前缀。 先说说这种布局的特点： 1）移动端由于屏幕宽度都不一样，在布局的时候为了适配，如果用百分比，就得精确计算，而且如果有1px边框，计算会更加复杂难控制 2）如果有多列 阅读全文

摘要： 在上一节中已经提到了预览，预览可以通过data: URL格式或URL对象。 一切都很顺利，但其实有很多的坑，需要慢慢讲来。先从前面做的一个小功能说起。 这个小功能就是将两张图片合成起来，组成一张新的图片。 一、技术实现 1）上传的控件就用“input[type=file]”实现 Android的we 阅读全文

摘要： 上传我们一般都是用“input[type=file]”控件。当你用此控件时，你就授权了网页和服务器访问对应的文件，就可以得到File对象。 友情提示在，在Android手机webview中，是不支持上传文件的，网上说是修改Android端的代码，但我没试过，我们这边是使用客户端提供的接口来实现上传的 阅读全文