“JS相关”目录存档

DOM元素querySelectorAll可能让你意外的特性表现

2015年11月5日,星期四

我们内容正如标题所示,就是介绍大家可能的对DOM元素querySelectorAll方法一些认知不清楚的地方。没有Demo页面,但是有源代码,有截图。本文内容还行,浅显易懂,也容易消化和吸收,算是不错的tips知识get点。

阅读全文…

内容loading加载后高度变化CSS3 transition体验优化

2015年01月22日,星期四

现在web技术不断发展,视图与数据渲染更多由前端呈现,后台更多与数据打交道。于是,我们会经常看到这样的交互场景。页面加载,看到一个框框里面有个菊花在转,然后内容呈现;或者点击个按钮,菊花在转,然后列表动态加载呈现。

确实,功能上OK,有菊花,用户也愿意等。但是,大家有没有觉得所有交互,出现菊花→出现内容,都是“砰砰砰”很生硬的感觉,尤其当内容是动态,高度不确定的时候。我们使用一些比较好的手机APP(如微信)的时候一定不会有这样的感觉,整个交互流程都是很流畅的,就像山涧的泉水,涓涓细流到山脚,而不是巨人在峡谷走路的感觉。

所以,如果菊花的呈现到内容的展示能够通过自然的动画过渡呈现,势必会增强用户体验。

而本文就将分享,我是如何渐进处理,让动画过渡呈现更自然的…… 必须的,demo,截图,源代码展示一个不少,希望本文的内容能够对您的学习有所帮助。

阅读全文…

mobilebone.js-mobile移动web APP单页切换骨架

2014年10月31日,星期五


一分耕耘一分收获,终于赶在月底前把这篇文章发布了,扳一扳手指头,快40天去了,鲜有项目做这么长时间。来鹅厂目前最大的收获之一就是做产品的态度,一定要花足够的精力去精雕细琢,kill每一个痛点,完善每一个体验。虽然过程很辛苦,但是做出来的东西大家会都喜欢。看上去好像谁到知道,做产品要用心,但事非经过不知难,一定要亲历与感悟,才能真正成为自己所得之物。

虽然上面调侃多次“说不定回火”,但自己实际并没有真在意。我并不确定有多少人会使用mobilebone.js, 但是,唯一我确定的是,心有多大,舞台就有多大,如果没有制作精品的态度,没有完成世界top级作品的胸怀,没有用心的反复雕琢与实践,一定是不会火的,最多就是发布时候众人捧个场、鼓个掌,然后,就没有然后了,就像千千万万昙花一现的小企业一般。

自己花了很多功夫为mobilebone.js做了些国际化工作,例如,JS全英文,项目含英文介绍等。虽说冲出亚洲、走向世界这个目标目前还很远,但是,若没有此番心胸、想法以及切切实实的努力,那就只是梦,而不是梦想了!

阅读全文…

图片主色获取脚本rgbaster.js小介绍小使用

2014年08月12日,星期二

本文的主要内容就是图片主色获取脚本rgbaster.js小介绍小使用,有demo有截图有源代码展示,不短不长,有吐槽,但不过火。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

ES6 JavaScript Promise的感性认知

2014年02月19日,星期三

对于先知的我们,故事的安排在脑中是即时出现的,而非实际上的异步发生。因此,作为创世的编程者而言,这种与瞬间思考所同步的代码更符合现实世界下的思考方式。因此,更易读更易于理解。Promise让我们以先知的视角呈现代码,更符合……

一篇偏理论的文章,不同的角度,不同的探讨,或许会有不同的收获。欢迎阅读,欢迎交流~~

阅读全文…

小折腾:JavaScript与元素间的抛物线轨迹运动

2013年12月30日,星期一

在页面上添加元素的位移动画,除了视觉效果(这是次要的),还有个作用就是视觉引导(重点)。举个大家可能见过的例子,选择商品的时候,我们希望商品飞到边缘或角落的购物车里,作用是:一来告知放在购物车里成功了,二来让用户知道购物车在哪里。

但是,直来直去的运动你用我也用,不出彩啊,于是,就有想法,我抛物线过去,会不会有别样的风采。

于是,……

阅读全文…

ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性

2013年12月18日,星期三


时代发展,事物变化。现代浏览器超过半壁江山,其API足以支持大规模的应用。如果就因为IE6-IE8这些浏览器的兼容性问题拖累,现代浏览器也要跟着加载其实可以不要的jQuery等框架,那现代浏览器发展的价值又在什么地方呢?于是自己整了个ieBetter.js. 让IE6-IE8拥有IE9+, Chrome等浏览器特性,也就是是要规范的API,而现代浏览器几乎没有任何的变化,该如何使用还是如何使用。最大化现代浏览器的发展价值,同时兼容IE6-IE8。这种“趋同策略”对于中小项目,简单页面而言是最佳策略,至少我自己是这么认为的。

试一下,这是个另外不同的世界!

阅读全文…

jQuery powerSwitch万能slide(切换)插件

2013年11月10日,星期日


2013年下半年,鄙人的代码作品之一,名曰“jQuery万能切换插件”。顾名思意,使用了此插件,web页面上的各种切换效果你都可以轻松实现。兼容IE6+,API简洁、设计巧妙。性能优异,使用简单。可谓网页开发制作必备佳品啊!

阅读全文…

XMLHttpRequest实现HTTP协议下文件上传断点续传

2013年11月5日,星期二

XMLHttpRequest实现HTTP协议下文件上传断点续传
目前从实用技术角度讲,文件上传的断点续传实现主要是借助客户端或Swf控件,也就是,这些带续传功能的上传都不是使用HTTP协议实现的,也就是不是传统的网页技术(HTML+CSS+JS)实现的。
然,times are changing, 事物发展,时代变化。以前的一些所谓的“不能”、“不可能”都将成为过去。
Ajax 2.0中最大的变化之一就是对二进制数据的支持,而且提供了一个可以直接处理二进制数据的方法——slice方法。

该方法为断点续传提供了有力的技术支持。

阅读全文…

理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型

2013年10月14日,星期一

我大学那会儿,一个称为Ajax的东西对前端行业造成了深远影响,不仅是JS语言,而包括前端地位、职位兴起以及工作分工等。抛开IE6浏览器不谈,其他浏览器的Ajax实际上都是借助XMLHttpRequest实现的。 然后,好多年过去了,XMLHttpRequest带着两位家臣,DOMString和Document数据类型攻城略地,几乎一统天下。 然时代是发展的,人们群众的需求是旺盛的,HTML5犹如冉冉升起的新星开始普照大地,恩泽大众。XMLHttpRequest由于就两个家臣DOMString和Document,且并不是100%听话。因此,其已经开始hold不住HTML5的耀眼光芒了。为了顺应时代的潮流,XMLHttpRequest凹凸曼变身升级到2.0,变化诸多,其中一个很重要的变化就是广招家臣,扩张实力,与HTML5一起完成千秋万载之大业。 这些家臣有……

阅读全文…