“JS实例”目录存档
2015年01月22日,星期四
现在web技术不断发展,视图与数据渲染更多由前端呈现,后台更多与数据打交道。于是,我们会经常看到这样的交互场景。页面加载,看到一个框框里面有个菊花在转,然后内容呈现;或者点击个按钮,菊花在转,然后列表动态加载呈现。
确实,功能上OK,有菊花,用户也愿意等。但是,大家有没有觉得所有交互,出现菊花→出现内容,都是“砰砰砰”很生硬的感觉,尤其当内容是动态,高度不确定的时候。我们使用一些比较好的手机APP(如微信)的时候一定不会有这样的感觉,整个交互流程都是很流畅的,就像山涧的泉水,涓涓细流到山脚,而不是巨人在峡谷走路的感觉。
所以,如果菊花的呈现到内容的展示能够通过自然的动画过渡呈现,势必会增强用户体验。
而本文就将分享,我是如何渐进处理,让动画过渡呈现更自然的…… 必须的,demo,截图,源代码展示一个不少,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签:getComputedStyle, height, transition, 加载, 动画, 渐进增强
发布在 JS实例 | 35 条评论 »
2014年10月31日,星期五

一分耕耘一分收获,终于赶在月底前把这篇文章发布了,扳一扳手指头,快40天去了,鲜有项目做这么长时间。来鹅厂目前最大的收获之一就是做产品的态度,一定要花足够的精力去精雕细琢,kill每一个痛点,完善每一个体验。虽然过程很辛苦,但是做出来的东西大家会都喜欢。看上去好像谁到知道,做产品要用心,但事非经过不知难,一定要亲历与感悟,才能真正成为自己所得之物。
虽然上面调侃多次“说不定回火”,但自己实际并没有真在意。我并不确定有多少人会使用mobilebone.js, 但是,唯一我确定的是,心有多大,舞台就有多大,如果没有制作精品的态度,没有完成世界top级作品的胸怀,没有用心的反复雕琢与实践,一定是不会火的,最多就是发布时候众人捧个场、鼓个掌,然后,就没有然后了,就像千千万万昙花一现的小企业一般。
自己花了很多功夫为mobilebone.js做了些国际化工作,例如,JS全英文,项目含英文介绍等。虽说冲出亚洲、走向世界这个目标目前还很远,但是,若没有此番心胸、想法以及切切实实的努力,那就只是梦,而不是梦想了!
阅读全文…
标签:animationend, animationstart, fastclick, history, mobile web, Mobilebone, mobilebone.js, 移动开发
发布在 JS实例, Mobile相关 | 291 条评论 »
2013年12月30日,星期一
在页面上添加元素的位移动画,除了视觉效果(这是次要的),还有个作用就是视觉引导(重点)。举个大家可能见过的例子,选择商品的时候,我们希望商品飞到边缘或角落的购物车里,作用是:一来告知放在购物车里成功了,二来让用户知道购物车在哪里。
但是,直来直去的运动你用我也用,不出彩啊,于是,就有想法,我抛物线过去,会不会有别样的风采。
于是,……
阅读全文…
标签:函数, 动画, 抛物线, 数学, 视觉引导
发布在 JS实例 | 51 条评论 »
2013年12月18日,星期三

时代发展,事物变化。现代浏览器超过半壁江山,其API足以支持大规模的应用。如果就因为IE6-IE8这些浏览器的兼容性问题拖累,现代浏览器也要跟着加载其实可以不要的jQuery等框架,那现代浏览器发展的价值又在什么地方呢?于是自己整了个ieBetter.js. 让IE6-IE8拥有IE9+, Chrome等浏览器特性,也就是是要规范的API,而现代浏览器几乎没有任何的变化,该如何使用还是如何使用。最大化现代浏览器的发展价值,同时兼容IE6-IE8。这种“趋同策略”对于中小项目,简单页面而言是最佳策略,至少我自己是这么认为的。
试一下,这是个另外不同的世界!
阅读全文…
标签:chrome, IE8, ie9, ieBetter.js, 兼容性, 浏览器
发布在 JS实例 | 78 条评论 »
2013年11月5日,星期二

目前从实用技术角度讲,文件上传的断点续传实现主要是借助客户端或Swf控件,也就是,这些带续传功能的上传都不是使用HTTP协议实现的,也就是不是传统的网页技术(HTML+CSS+JS)实现的。
然,times are changing, 事物发展,时代变化。以前的一些所谓的“不能”、“不可能”都将成为过去。
Ajax 2.0中最大的变化之一就是对二进制数据的支持,而且提供了一个可以直接处理二进制数据的方法——slice方法。
该方法为断点续传提供了有力的技术支持。
阅读全文…
标签:Ajax, Blob, File, HTTP协议, XMLHttpRequest, 上传, 文件上传, 断点续传
发布在 JS实例 | 63 条评论 »
2013年06月19日,星期三
众所周知,Ajax可以实现页面的无刷新操作——优点;但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。
当执行Ajax操作的时候,往浏览器history中塞入一个地址(使用pushState)(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。
本demo所展示的就是ajax的内容载入与地址栏的前进与后退,典型应用,对于熟悉相关知识点很有帮助。
阅读全文…
标签:Ajax, history, HTML5, onpopstate, pjax, pushState, replaceState
发布在 JS实例 | 77 条评论 »