摘要:
文章讨论了3种办法实现无刷新上传文件,分别是使用iframe、FormData和FileReader,支持性最好是的iframe,但是从体验的效果来看FormData和FileReader更好,因为这两者不用生成一个无用的DOM再删除,其中FormData最简单,而FileReader更加灵活。 阅读全文
摘要:
三栏自适应宽度布局貌似是一个老生常谈的问题,本文通过对几种办法的一步步分析,希望能够谈出一些新东西。这些办法包括最了原始的table布局,然后就是float布局、table-cell、margin负值法以及flex布局来实现自适应宽度的实现和原理,重点讨论了float的一些特性,最后再分析另外一个自需要根据其它元素宽度进行自适应的例子。 阅读全文
摘要:
一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见另外一篇博客:使用css3新属性clip-path制作小图标,本文深入讨论使用icon-font的制作方法:在PS里面导出svg,制作字体图标。这种方法既有sprites图不需要浏览器发多次请求的优点,也有使用clip-path/svg矢量无损的优点,并且支持IE6及以上。 阅读全文
摘要:
信息比较丰富的网站通常会以分页显示,在点“下一页”时,很多网站都采用了动态请求的方式,避免页面刷新。虽然大家都是ajax,但是从一些小的细节还是 可以区分优劣。一个小的细节是能否支持浏览器“后退”和“前进“键。本文讨论两种方法,让浏览器可以后退和前进,或者说让ajax就像重定向到新页面一样 拥有能够 阅读全文
摘要:
JS虽然是一个面向对象的语言,但是不是典型的面向对象语言。Java/C++的面向对象是object - class的关系,而JS是object - object的关系,中间通过原型prototype连接,父类和子类形成一条原型链。本文先分析JS的对象的封装,再探讨正确实现继承的方式,最后对ES6新引入的类class关键字作一个简单的说明。 阅读全文
摘要:
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹。然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一些比较特别的动画。 太阳系最终的效果图如下: css3的animation是通过关键帧的形式做出来的 阅读全文
摘要:
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种。最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片。但这也是比较笨的方法,因为浏览器同一时间最多加载的资源是有限的,例如IE7是2个,IE8是6个,chrome是6个,火狐是8个。如果网页上面有... 阅读全文