“JS实例”目录存档

内容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有截图有源代码展示,不短不长,有吐槽,但不过火。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小折腾: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。这种“趋同策略”对于中小项目,简单页面而言是最佳策略,至少我自己是这么认为的。

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

阅读全文…

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

2013年11月5日,星期二

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

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

阅读全文…

ajax与HTML5 history pushState/replaceState实例

2013年06月19日,星期三

众所周知,Ajax可以实现页面的无刷新操作——优点;但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。

当执行Ajax操作的时候,往浏览器history中塞入一个地址(使用pushState)(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。

本demo所展示的就是ajax的内容载入与地址栏的前进与后退,典型应用,对于熟悉相关知识点很有帮助。

阅读全文…

Chrome下语音识别实现页面快速引导以及重要交互

2013年05月22日,星期三

今天,我们上线了一个小东西,基于Chrome浏览器语音识别功能实现的一个快速页面交互以及页面间跳转的效果,觉得大家都可以尝试尝试,因此,整理了下分享出来。

抛砖引玉、集思广益,有意见或建议什么的欢迎提出来,大家多多交流,共同进步。

阅读全文…

小tip: 微博新版查看大图前后浏览的另外一种实现

2013年05月17日,星期五

标题小tip打头嘛,说明内容不多。看标题主体嘛估计又是黑新浪的,介绍另外的实现,小东西,喜欢的人自然喜欢。文章前后都有些吐槽,看上去啪啪啪说得很利索,言辞犀利,一气呵成,实际上,是像便秘一样,一点一点挤出来的。文章嘛,又没时间限制的,可以修改斟酌啊什么的。但是对话面试什么的,容不得多想多斟酌,那怎么办呢?还能怎么办,认命,等死,平时多练练呗~~

阅读全文…

小tip: DOM appendHTML实现及insertAdjacentHTML

2013年05月10日,星期五

本文重点不在appendHTML方法实现的本身,而是相关的一些DOM节点处理的熟悉,例如文档片段,子节点们,节点的后插以及前插等等……有代码有demo有截图,如果您是JS新手,本文的内容应该能对您的学习提供一些帮助。

阅读全文…