2010年08月2日 by 张 鑫旭 阅读 128040 次, 今日 6 次
本文介绍的是我最近几天写的,自认为还不错的一款jQuery插件,此插件用来在页面上显示标尺,同时创建参考线。UI效果模仿著名的图像制作编辑软件photoshop,里面的一些也与photoshop一致,例如标尺的显示隐藏,参考线的显示与隐藏,拖移标尺可以新建参考线,参考线可以随意移动,可以使用对话框新建参考线,支持快捷键操作等。
另外,自己还更近一步,提供了很多标尺,参考线相关操作的接口,可以实现自定义的一些功能。例如页面加载显示自定义的参考线等。总之,个人认为是自己近期写得相当满意的一款插件。同样的,本文提供丰富的截图,必要的demo以及代码展示,以及源文件打包下载。希望能对您有所帮助。
阅读全文…
标签: jQuery, keyCode, photoshop, plugin, zxxPageRuler, 工具, 快捷键, 插件, 标尺
发布在 jQuery相关 | 27 条评论 »
2010年07月29日 by 张 鑫旭 阅读 50389 次, 今日 2 次
老外的演示文档简单生动有趣,以前企鹅团队层翻译过一篇过于line-height的文档,很是不错,我是从中学到了不少东西。这两天,我也抽空翻译个风格类似的文档,是关于CSS继承的,虽然内容比较基本,但是看看还是会有不少帮助的。学习腾讯团队的做法,我也将翻译编辑好的PDF传到了slideshare上,以方便大家的分享与学习。
阅读全文…
标签: css相关, dom, font-family, font-size, line-height, PDF, slideshare, 中文字体, 演示, 继承, 翻译, 腾讯
发布在 CSS相关, 外文翻译 | 7 条评论 »
2010年07月27日 by 张 鑫旭 阅读 249112 次, 今日 6 次
本文内容很简单,就是展示下如何使用js脚本实现倒计时效果。倒计时效果在团购类网站上可谓必须确定以及肯定会有的,如今团购网站如雨后春笋,一个接一个的冒出来,所以,这类前端效果还是有些实用价值的,故有此文,希望对有需要的同行们提供些帮助。
外甥点灯笼——照旧,有截图,有demo,有代码展示,以及提供必要的文件下载。
阅读全文…
标签: Date, dom, javascript, js相关, setTimeout, UTC, 倒计时, 团购, 点评网, 美团网, 腾讯网
发布在 JS实例 | 55 条评论 »
2010年07月27日 by 张 鑫旭 阅读 142829 次, 今日 3 次
我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章——“CSS实现跨浏览器兼容性的盒阴影效果”,本文虽然题目类似,但是核心部分是有差异的。前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜,但是使用的是shadow滤镜,这种滤镜的效果很牵强,效果过渡不自然,而本文实现的IE下的盒阴影效果就相对非常自然,而且还支持内阴影的UI表现。
本文提供各个效果截图,提供丰富飞实例以及代码展示,希望能对您的学习有所帮助。
阅读全文…
标签: box-shadow, chrome, css3, filter, Firefox, hack, IE, z-index, 兼容性, 滤镜, 绝对定位
发布在 CSS相关 | 12 条评论 »
2010年07月23日 by 张 鑫旭 阅读 223091 次, 今日 46 次
本文将详尽的展示让IE浏览器(IE6/IE7/IE8)支持常见CSS3属性的又一个方法。主要包括CSS3 border-radius圆角,box-shadow盒阴影,以及背景色渐变等。使用简单,资源开销也相对较小。
本文提供丰富的效果截图,代码展示。提供源文件打包下载,同时制作了大量的demo,以及实例演示。并对可能存在的一些问题进行的介绍与分析,希望可以对您的学习有所帮助。
阅读全文…
标签: border-radius, box-shadow, css-gradient, css3, gradient, htc, IE6, IE7, IE8, pie, vml, 圆角, 渐变, 渐变背景, 盒阴影
发布在 CSS相关 | 40 条评论 »
2010年07月22日 by 张 鑫旭 阅读 81138 次, 今日 3 次
本文以通过class切换,实现简单的鼠标悬停效果为实例,展示下MooTools和jQuery库实现继承的差异。通过两者的对比来帮助对这两个库的理解,对于绝大多数同行而言,可能更熟悉jQuery多点,通过对比,可以更好的了解MooTools的思想行为以及一些使用等。
本文提供截图,代码展示,以及源文件打包下载,希望能对您的学习有所帮助。
阅读全文…
标签: css相关, extend, hover, javascript, jQuery, js相关, MooTools, 继承, 鼠标事件, 鼠标悬停
发布在 jQuery相关 | 6 条评论 »
2010年07月15日 by 张 鑫旭 阅读 202500 次, 今日 6 次
本文主要是讲述有关页面锚点的一些知识,以及IE浏览器下锚点的一些问题及修复。最后,提供了自己写的一个很小的任意标签锚点跳转的小jQuery插件,并对此插件的使用进行的简单的介绍。
本文提供丰富的截图,提供必要的demo,以及源代码展示,提供相关的源文件下载。希望能对您的学习有所帮助。
阅读全文…
标签: animate, IE, jQuery, plugin, URL, 插件, 浏览器, 滚动条, 链接, 锚点, 锚点跳转
发布在 jQuery相关 | 22 条评论 »
2010年07月13日 by 张 鑫旭 阅读 299707 次, 今日 5 次
本文将展示我是如何对网站的CSS进行架构的,表达能力有限,尽量展示自己的想法,观点。本文可谓将之前一些列的CSS内容作了个简短的总结,从css rest,CSS 库,到自适应布局,到代码的分离与合并等。提供必要的图片,代码展示,以及一些源文件下载。
说实话,全然套用我展示的这套架构会由于不熟悉或是掌控不够而产生问题,但是,里面一些概念,一些思想应该能有一定的启示作用的。
另外,我只是个初出茅庐的小生,我知道,很多真正功力深厚的前端开发人员有着更好的更广泛适应的前端架构,如果您有幸来到这里,欢迎分享您的一些见解与认识。还有,文中若有您觉得不合理的观点,也非常欢迎指正。我们需要在不断的交流中提高的。
阅读全文…
标签: css reset, css sprites, CSS库, CSS架构, 固定布局, 圆角按钮, 宽度自适应, 按钮, 架构, 流体布局
发布在 CSS相关 | 98 条评论 »
2010年07月8日 by 张 鑫旭 阅读 121586 次, 今日 4 次

本文的核心观点为CSS的合并与模块化,似乎与前一篇文章“CSS样式的再分离”有矛盾,其实不然,分离可以精简CSS代码,合并也可以精简CSS代码,一切都是权衡!或是说是在恰当的情况下使用恰当的手段。
正如前文所提到的,分离可以精简CSS,但是同时会带来巨大的HTML代码的开销,显然,对所有的样式进行再分离式不切实际的,是会带来痛苦的。
本文的“合并”和“分离”属于对立又相辅相成的,理解的“合并”与“分离”的精髓之后,您会发现写CSS代码就是一门艺术。同样的,本文也是为我后面的“我的CSS架构”一文做铺垫的,写这些都是为了同一个目的:写出最精简高效的CSS代码……
阅读全文…
标签: CSS库, CSS架构, css相关, html, 文本框美化, 样式分离, 样式合并, 模块化, 系统架构
发布在 CSS相关 | 12 条评论 »
2010年07月8日 by 张 鑫旭 阅读 160309 次, 今日 4 次

我从以前讲布局思想,讲无CSS rest,到现在的CSS样式分离之再分离,以及后面的CSS架构,都是一个体系里面的。我清楚的指导,这些东西,其实很多优秀的前端人员也是知道一二,或是比我理解更深刻的。但是,对于大多数同行而言,可能认为我“又在挑刺”,其实不然。
我把我自己的理解讲出来,是希望让您知道,现在绝大多数的CSS写法,架构都是有很多不足的,缺少创新。我就这么跟您说吧,您所做的任何项目,其实根本只要一个CSS文件就足够,您要是真的通透了CSS的“分离”、“架构”,即使这个网站项目有100个页面(风格统一),您也可以只使用一个CSS页面,并且可以控制CSS文件(未压缩)在40K以下。
我是自信可以这么实现的。我最近做的项目50多个页面,未压缩(含大量注释,竖排)的CSS文件,就30K左右,服务器端压缩后仅11K左右,同时网站整站自适应,从内容到各个按钮,导航,全部宽度自适应,兼容性良好….
阅读全文…
标签: css reset, css相关, html, 兼容性, 分离, 布局, 架构, 样式, 样式分离, 流动性布局
发布在 CSS相关 | 23 条评论 »