JavaScript实现新浪微博文字放大显示动画效果

2009年10月31日 by 张 鑫旭 阅读 66252 次, 今日 4 次

围脖,新浪微博
新浪微博是全中国最主流,最具人气,当前最火爆的微博产品。用一句话随意记录生活,用手机随时随地发微博。用秒杀电视的速度发现最热最火最快最酷最新的资讯。
本文不是讲新浪微博产品的,纯粹的技术文章,用JavaScript上实现微博上一个不错的效果——信息发布后,发布条数放大显的动画效果。提供全真的demo实例页面,可以实时观察效果,提供源文件下载,希望对感兴趣的您有所帮助。

阅读全文…

翻译:让网络更快一些——最小化浏览器中的回流(reflow)

2009年10月31日 by 张 鑫旭 阅读 58443 次, 今日 1 次

reflow可以说是最近开始被广泛提到的名词,指的是页面上几何布局的格式化结构被重新计算的过程。而这个过程是要花费时间的,而且这个时间在提高页面速度,增强用户体验上是非常关键不可忽略的一环。本文翻译了一篇琳赛(Lindsey)关于reflow的文章,简要介绍了什么是reflow,为什么要重视reflow time(回流时间),以及一些改进回流时间的一些小建议。希望我的翻译对您有所帮助。

阅读全文…

jQuery之addClasas与removeClass使用实例

2009年10月27日 by 张 鑫旭 阅读 70419 次, 今日 5 次


上图为人人网好友分组功能模块,我用firebug对其高度进行了改动,所以这里显示的高度比实际的低。图示效果源自facebook,结构比较精细,体验上佳,图中的深色表选中状态。
本文就将演示如何使用jQuery的addClasas与removeClass轻松实现上面很赞的样式效果。本文实例效果包括两个主要部分,一是单击单个好友样式的切换,还有一个就是单击“已选”“未选”文字选项卡按钮后的样式的筛选,均使用ddClasas与removeClass实现。
提供完整的css样式以及JavaScript代码,提供demo实例演示页面和源文件下载。希望对您有所帮助。

阅读全文…

关于Google圆角高光高宽自适应按钮及其拓展

2009年10月24日 by 张 鑫旭 阅读 122206 次

谷歌gmail邮箱中出现的圆角高宽自适应按钮
本文以Google圆角高光高宽自适应按钮为引子,阐述此貌似平常的按钮后面的强大技术,并提供我经过我反复试验的更加优化高效的css实现方法,并对其优点进行分析。然后进一步扩展,探讨Google在css技术应用以及网页产品开发上的思想意识,强调应该有将css扩展性重用性发挥到极致的意识。并通过将虾米网图片按钮转换为效果一致的css按钮这个实例进一步验证培养css重用性可扩展性意识的重要性。本文不仅仅是讲解如何通过高效的css实现一些貌似只有图片才能实现的效果,更重要的是要传达Google在产品设计在技术运用上所体现的一种思想,传达Google是如何将产品的扩展性预见性运用到极致的,借以希望你我都能从众领悟到一些东西,然后在前端这块领域有所作为。
本文提供技术实现代码以及demo实例页面,希望对您有所帮助。

阅读全文…

JavaScript实现图片幻灯片滚动播放动画效果

2009年10月21日 by 张 鑫旭 阅读 118951 次, 今日 2 次

在网页上用幻灯片动画效果展示图片等是常用的手段之一,有一类效果相对酷一点的是JavaScript+flash的实现,但是一般这类动画总是占据网页最重要的位置,如果用户未安装flash插件,则显然会有问题。在大型网站上,多使用纯粹的JavaScript实现这类效果。
这里我就尝试性的实现了这个效果。在本文中所展示的这个图片切换的JavaScript代码,个人觉得,还是挺精炼的,希望对有兴趣的同仁能提供一些参考。提供直观的demo实例页面,源代码可以在实例页面上右键单击查看,希望对您有所帮助。

阅读全文…

jQuery-鼠标经过显示大图并跟随鼠标效果插件

2009年10月17日 by 张 鑫旭 阅读 102738 次

好久没有更新文章了,今天抽了点时间,写了个jQuery插件练手。实现的效果是,鼠标移到缩略图上会显示该图的大图,并且大图跟随鼠标移动;或是移动到提示文字上,也可以显示图片。并且含有方向判别功能,具体来说就是如果缩略图在页面的左半部分,则大图显示在鼠标的右侧,如果缩略图在页面的右半部分,则预览的大图在鼠标的左侧显示。水平有限,可能会有不完善之处,欢迎指正。
提供实例页面效果预览和源文件下载,希望对您有所帮助。

阅读全文…

关于gif图片(或png8)杂边锯齿的问题

2009年09月29日 by 张 鑫旭 阅读 175668 次, 今日 6 次

关于gif图片的锯齿问题可谓是久治不愈的痔疮——老问题了。网上零零散散有些相关的探讨,但是却没有一个关于gif图片锯齿很完整的论述性的文章,这里我就稍微辛苦些,结合自己以往与gif图片打交道的经验以及网上搜集的一些资料,写一篇不太正式的论述性的文章,主要分析gif图片(或png8)产生杂边锯齿的原因,以及提供一些避免这些杂边锯齿的方法。我虽说才能有限,但尽量保证每句论述都有据可循,另外文章内容尽量配合图片进行叙述,提供相应的demo实例页面,希望对您有所帮助。

阅读全文…

对html与body的一些研究与理解

2009年09月18日 by 张 鑫旭 阅读 158207 次, 今日 2 次


最近一直构思着写篇关于html标签的文章,虽说之前处理过html标签,也解决过不少棘手的问题,但是对其理解还不是很透彻,很多原理都是自己推测的。
在网上查阅相关资料想整合一下相关的信息,发现深入探讨html,与body的文章很少,只有在蓝色理想看到一篇“一叶千鸟”的这篇“正确认识html与body”有点价值,其余都没有什么相关的好文章。
而这里,我要讲述的与上面的交集并不多,主要是讲述一些关于html与body的各种表现,我自己的一些解释,以及处理相关问题的些经验,很多应该是网上很少提及的东西,内容不算深奥,我尽量截图展示,表述清晰,希望对大家能够有所帮助。

阅读全文…

鲜为人知的一个解决兼容性问题的利器——小数

2009年09月12日 by 张 鑫旭 阅读 87383 次, 今日 3 次

说到解决兼容性问题,不得不提一下css hack,曾几何时我以会使用几个hack沾沾自喜,后来发现自己真是个vip级别的蠢蛋,会用几个hack只是中级阶段,真正厉害的人要以没有hack同样可以实现复杂页面的兼容性,这才叫厉害。

这里将介绍一个很有趣的您应该没有见过的解决某些兼容性问题的神奇的一招——使用小数值。小数值像素在不同浏览器下的解析是有差异的,但是这种差异一旦用到点子上,乖乖,可以反而用来解决兼容性问题。正所谓一物降一物啊。

本文将由浅到浅,就是很浅显的讲解这个平时很不受注意的现象与方法。提供实例页面,希望能对您有所帮助

阅读全文…

搜狐白社会似iphone短信对话框效果的优化

2009年09月10日 by 张 鑫旭 阅读 79690 次, 今日 2 次

搜狐有个白社会,今年六七月份露出水面的。其首页css我是从头到尾看了一遍,学了些东西,也用自己的想法优化了些东西。其中之一就是一个显示你或者是好友说了些什么的popup式的对话框,有些形似iphone里面的可爱的短信对话框。

这个对话框效果是不错的,能支持高度上限500像素的文字内容,宽度自动适用于内部的文字内容。
但是参观其HTML代码是背景图片后,发现要实现这样的效果,这代码,至少是这图片肯定是优化不够的。而本文将对比其原来的方法,提供更加大小优化的图片和对应的没有兼容性问题的css代码,看如何将css发挥到机制实现图片背景的优化。

文章主体将简要展示对原图片做如何的处理,展示在各个浏览器下的兼容性表现,以及一些关于css的相关说明。提供实例页面和相关的源文件打包下载。希望对您有所帮助!

阅读全文…