视网膜New iPad与普通分辨率iPad页面的兼容处理

2012年10月25日 by 张 鑫旭 阅读 109931 次, 今日 1 次

本文内容多少有点含沙射影,旁击侧敲的味道。题目虽然是将new iPad与普通iPad不能显示屏上的兼容性处理,实际上,讲的是所有视网膜显示屏的一些处理;随着以后普通显示器和视网膜显示器2分天下,就是我们开发的苦日子时候。
既来之则安之,本文先打个预防针,分享点我近期iPad项目的一些处理经验。希望能对其他同行面对同样问题的时候提供一些帮助。

阅读全文…

“更多|收起”交互中渐进使用transition动画

2012年10月19日 by 张 鑫旭 阅读 145500 次, 今日 1 次

虽然,web世界中,交互动画效果N多多,但是,很多都是约定俗成的,或者称之为“有固定套路的”。
根据David Kaneda创建的Transitions动画CSS代码,我们可以将效果归结为这几大类:slide(滑来滑去), fade(淡入淡出), flip(飞来飞去), pop(大大小小).
如居中弹框呈现与隐藏,适合pop效果;绝对定位浮动层(如智能提示下拉框,自定义时间选择控件)等的呈现与隐藏使用fade效果;幻灯片播放的广告位效果一般为slide效果;点击某商品飞入页面右下角或左上角的购物车就是flip效果(类似最新FireFox浏览器关闭标签页效果)。
而对于页面上,“展开更多|收起更多”这类交互……

阅读全文…

ECMAScript 5(ES5)中bind方法、自定义及小拓展

2012年10月12日 by 张 鑫旭 阅读 143148 次, 今日 2 次

ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。其中,新增了一个名叫bind函数扩展方法(),以前有提过,点击这里查看详细。
不过,之前的介绍纯粹的翻译,含糊其辞,水土不服,这里,换身接地气的装束,让大家好好了解了解……

阅读全文…

HTML5全屏API在FireFox/Chrome中的显示差异

2012年10月8日 by 张 鑫旭 阅读 143136 次, 今日 2 次

FireFox浏览器下的黑色背景就是全屏元素,其中图片的居中对齐是通过CSS控制的(:after伪类生成元素+vertical-align:middle实现),例如去掉text-align:center图片就不水平居中了;而Chrome的黑色背景属于系统的东西,其全屏元素似乎被浏览器劫持,默认状况下永远屏幕居中显示(去掉text-align:center图片依然水平居中)——脱离了常规CSS理解——如默认的display:block状态似乎变成了display:inline-block等……

阅读全文…

CSS3背景图片透明叠加属性cross-fade简介

2012年09月29日 by 张 鑫旭 阅读 89520 次, 今日 1 次

据说iOS6系统(iPhone5)增加了两个CSS3属性,一个是CSS3 filters – CSS3滤镜,在“CSS将图片转换成黑白”一文中就介绍过CSS3 grayscale滤镜;另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出。
毕竟有IE滤镜这厮,所以前者看上去可能不那么显生;那后者Cross-fade是?

阅读全文…

基于HTML模板和JSON数据的JavaScript交互

2012年09月28日 by 张 鑫旭 阅读 260760 次

本文内容如题,就是将如何是有HTML模板以及JSON数据进行JavaScript的数据呈现以及开发。里面的东西个人成分比较重,个人觉得是蛮好蛮实用的东西。因此,拿出来和大家分享分享。一如既往,有demo页面,有大量的截图配图以及必要的源代码展示。总之,希望本文的内容能够对您的学习有所帮助!

阅读全文…

视区相关单位vw, vh..简介以及可实际应用场景

2012年09月24日 by 张 鑫旭 阅读 325497 次, 今日 7 次

视区相关单位vw, vh
CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间、频率、角度单位。显然,其中就提到了本文要感叹的单位vw, vh.
不过“我看见你”和“我触碰你”是不一样的。正好,机缘巧合,最近又与这两个单位想见。大致琢磨了下,貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局。想到这里,自己不由得小兴奋了下,于是决定抽时间研究研究(虽然最近整iPad忙得屁股尿流~~)

阅读全文…

翻译:清除各个浏览器中的数据研究

2012年09月18日 by 张 鑫旭 阅读 104607 次, 今日 4 次

对于快速Web APP,缓存四赢得性能的关键。最近个把月,我做了个所谓“清除浏览器实验”,研究下用户清除缓存的时候会发生哪些奇葩的事情。另外,除了浏览器的磁盘缓存(指图片啊等数据),我还折腾了其他一些数据格式,如:cookies, localStorage, 以及 application cache. indexedDB并不在其中,因为貌似其要嗝屁了……

阅读全文…

好吧,CSS3 3D transform变换,不过如此!

2012年09月7日 by 张 鑫旭 阅读 887729 次, 今日 6 次

轻松驾驭CSS3 3D transform变换
CSS3 3D transform变换对于没有接触过的人而言可能会是件很头疼的事情。首先涉及到N多CSS方法以及CSS函数,如何理解他们头疼;其次,3D效果的实现,需要一定的空间想象能力,但是,不少人的脑袋是会想妹子想男人,怎么办?再者,3D效果的实现还离不开各种角度方位的数学计算,要是勾起了某些人学生时代的数学梦魇,又可如何是好!

相当不少人有这样的境遇,加上自己最近也在学习CSS3 3D transform变换的相关东西。好吧,整理一下,用通俗易懂的方式表达下我对CSS3 3D transform变换的一些理解;分享知识同时,自己也整理和提高了。一举两得,何乐不为。

本文是难得的长篇,很多精心挑选制作的配图,N多帮助理解制作用心的的demo页面,还有必要的源代码展示等。希望本文的内容可以让您学习CSS3 3D transform变换的相关知识更加的轻松!

阅读全文…

近期手机网页项目一些杂碎心得分享

2012年08月31日 by 张 鑫旭 阅读 121323 次

其实上上周就可以出此文了,只是,就跟谈恋爱一样的,要讲求时机以及心情。这会儿,看完了海贼王情报,处理了邮件,文章评论以及部分同行靠谱的提问,加上好几天没有动“笔头子”了,于是,很有兴致,分享些杂碎的知识点。
头一次写星星点点知识的分享。不过应该压力不大,貌似不需要什么严谨的逻辑。想到了就说,再堆麻将版摞起来就可以了~~
项目是做移动网页版的内容,从塞班S60到iPhone以及Android手机以及window phone都要支持。采用渐进增强策略,塞班S60布局良好,功能可以正常使用,至于模样嘛,看得过去就可以。
千奇百怪手机,显然,会出现N多让人都无力吐槽的兼容性问题。这里,share下,希望可以为后来者或是正在遇到类似问题的你提供点思路……

阅读全文…