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

2009年10月24日 by 张 鑫旭 阅读 60252 次, 今日 8 次

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

阅读全文…

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

2009年10月21日 by 张 鑫旭 阅读 90907 次, 今日 11 次

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

阅读全文…

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

2009年10月17日 by 张 鑫旭 阅读 70751 次, 今日 17 次

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

阅读全文…

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

2009年09月29日 by 张 鑫旭 阅读 106646 次, 今日 38 次

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

阅读全文…

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

2009年09月18日 by 张 鑫旭 阅读 92410 次, 今日 38 次


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

阅读全文…

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

2009年09月12日 by 张 鑫旭 阅读 43078 次, 今日 13 次

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

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

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

阅读全文…

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

2009年09月10日 by 张 鑫旭 阅读 44705 次, 今日 18 次

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

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

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

阅读全文…

关于文字内容溢出用点点点(…)省略号表示

2009年09月5日 by 张 鑫旭 阅读 282882 次, 今日 263 次

在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(…)显示,这样,按照习惯,人们都会知道这儿有文字被省略了。css中有个属性叫做text-overflow:ellipsis;配合其他一些属性可以实现IE,chrome,safria浏览器下文字溢出点点点省略号显示,在加上opera浏览器的私有属性-o-text-overflow:ellipsis;就目前而言,可以实现Firefox浏览器以外的所有主流浏览器的文字溢出点点点省略号显示。

而本文将提供多种兼容性上佳的文字溢出点点点省略号显示的方法,而里面不少方法就是自己想出来的。有使用外部辅助文件的,有纯粹的css方法的,还有使用jQuery方法的。每种方法都提供各个浏览器下的截图验证,提供实例页面,提供部分源文件,都是值得信赖的方法,希望对您有所帮助。

阅读全文…

as3写的flash特效菜单(三十五)

2009年09月3日 by 张 鑫旭 阅读 10271 次, 今日 2 次

我用ActionScript 3.0写的flash水果菜单系列之三十五,弹性垂直下拉式菜单,提供swf预览和fla源文件下载,希望对您有所帮助。

阅读全文…

as3写的flash特效菜单(三十四)

2009年09月3日 by 张 鑫旭 阅读 10119 次, 今日 2 次

我用ActionScript 3.0写的flash水果菜单系列之三十四,数字翻滚效果,技术有限,旨在交流。提供swf预览和fla源文件下载,希望对您有所帮助。

阅读全文…