Hiro技术站

插件专区新篇—-Hiro.pagenav:自渲染、自解析的分页插件 v1.8更新

CSS:Firefox 4 将支持CSS3 calc方法

分类:CSS、Xhtml, 前端工程译文 发表时间:2010年06月12日

该文是用来讲解CSS3中calc()方法,这一功能特性在Firefox之前的任何版本中都没曾集成,但在Firefox4版本中它将得以实现。

Firefox将支持CSS3 calc(),它通过一个算术表达式用来计算出一个长度值。这就意味着你可以用它来定义DIVs的大小,margins的值,borders的宽度,等等。

一个重要的特性是:在calc()方法的算术表达式中可以联合多个不同的单位进行计算;calc()方法支持+, -, *, /, mod, min, 和 max 运算符。

资料参考来自:http://hacks.mozilla.org/2010/06/css3-calc/ | http://www.w3.org/TR/css3-values/#calc

CSS:通过一个样式表区分IE的各个版本

分类:CSS、Xhtml 发表时间:2010年05月17日

通常我们知道为了修复IE各个版本与其他浏览器的兼容,在head标签内会添加条件判断,根据不同的判断结果联入不同版本的CSS样式表。

这样的方法在我所有的网站或者博客中都是如此应用,但我也一直在纠结着多出了多余的样式表文件,HTTP请求也就多了一个。这对于我这个做前端的是一个严重的问题,但一直都没有找到可以优化的方法。

但是今天我看到了一篇文章,他教会了我另一种条件判断的方法。可以用条件判断的结果来添加多余的包含标签。同时也发现,自己思考的太少了。

CSS:CSS3基础(附图)

分类:CSS、Xhtml, 前端工程译文 发表时间:2010年03月8日

今日在Web Designer Wall博客上看到这篇介绍css3基础的博文,文章其实很普通,关键喜欢他配上了截图,看起来就更加明了。便花了点时间整理后发表出来与大家分享一下!

文中主要介绍了四个css3高级属性,也是最最常用的四个css3属性。

最后,css3高级属性远远不值文中的这些,文中讲到的是一些基础的,也是使用最多的,为了给用户带去更多的美好体验,努力学透css吧!

本文翻译自:Web Designer Wall — The Basics of CSS3

jQuery:增强型走马灯公告栏,可以抛弃marquee标签了

分类:jQuery, 案例分享 发表时间:2009年11月26日

noticeBox-thum

昨天晚上收到的求助邮件,说因上级的要求需要制作一个走马灯效果的公告栏,希望我可以帮助他解决。因看到邮件的时候都快要睡觉了,所以并没有立即处理。

今天早上到了公司,放开手边的工作,花了一点点时间给他制作了一个主流浏览器都兼容的走马灯公告栏。然后mail给他,但他过会儿回邮件说缺少鼠标悬停时停止的效果。于是乎有花了几分钟添加了相应的代码。到了下午快下班的时候,该同学又发来了邮件,说我的公告栏的效果有点欠缺,现在的效果和marquee标签的效果一样,需要等内容上移完成后才会重复滚动,如果可以连续滚动的话那就完美了。

于是就在刚刚的时间我有花了几分钟的时间给他解决了,mail给他。不知道他是否还会有什么新的要求呢,期待啊!毕竟这对我来说也是一个挑战嘛,同时也帮助到了别人,何乐而不为呢!

Ajax:当前页面更改内容,前端实现

分类:jQuery, 案例分享 发表时间:2009年09月23日

Ajax-Editing

相信大家有用过Google Doc或Flickr,或者一些SNS社区的图片添加描述信息的效果,他们是在点击了一段文字后出现一个输入框,在输入框内输入你要填写的内容,点击“确认”或者“发表”即可立即显示出来。

今天做的这个效果呢,就是其中的截取版本。为什么这么说呢,因为我的效果只实现了前端的更改后立即发布的效果,而没有实际的与服务器端交互,也没有将输入的内容添加到数据库中,主要是为大家介绍一下实现原理。

注意:源代码中没有jQuery库文件,请下载查看代码的朋友根据源代码路径自行添加。

CSS:分享一些常用的css技巧

分类:CSS、Xhtml 发表时间:2009年09月3日

common-used-css-skills

随着近几年来Web标准的流行,css也逐渐有原先辅助的角色转变成了各大网站编程的重要组成部分一直。它很好地将样式与内容分离,使得后期的版面维护与更新工作得以更加地便捷!

今天与大家分享一些在网站开发过程中常用到的一些css技巧,或许会给你的编写带来一些方便之处。已经知晓这些技巧的人完全可以忽略这篇文章。

这些css技巧或许很简单,但我的初衷是希望可以给初学者带去一些帮助。当然css技巧远远不止这些,以后会逐渐整理了发表出来与大家分享。

jQuery:热点图片轮换展示效果

分类:jQuery, 案例分享 发表时间:2009年08月28日

imgPlay

分享一个我做的图片轮换展示效果,主要实现原理:通过设置非第一个图片的position,通过overflow:hidden属性隐藏,再使用jQuery的animate效果函数作出链性轮换的效果。

轮换的图片是我第一个主题的banner大图的截图版。在提供下载的压缩包里有一个png的图片是Fireworks的源文件,喜欢修改的朋友可以自行修改!另压缩包中的源码没有添加注释,不懂的请阅读本文中的注释。

PS:jQuery库请根据源码的路径自行加入,压缩包中不提供下载。

jQuery:使用css+jQuery模拟键盘

分类:jQuery, 案例分享 发表时间:2009年07月14日

今天在阅读Nettuts+的Feed时看到了这个模拟键盘的效果,很是喜欢。便查看的源码后,了解了实现的原理,自己重新编写了CSS和JS代码,现效果如下:

外部链接查看效果:Demo,源代码下载:Download

jQuery:书籍展示效果

分类:jQuery, 案例分享 发表时间:2009年07月10日

前段时间在国外的博客上看到这个jQuery的书籍展示效果,觉得很是不错,并下载了源码,自己重新编写了CSS和JS,效果:如下

说明:因为在此页面中是通过使用iframe标签引入外部页面,加上显示页面的宽度有限,所以当鼠标移动到Info图标上时,部分内容被遮盖住,这时你可以通过外部链接查看:Demo

源代码下载

CSS:纯css的伪动态分页效果

分类:CSS、Xhtml 发表时间:2009年07月6日

使用css编写的一个动态分页效果,通过使用opacity和filter实现透明效果,分页效果如下:

第 1 页,共 2 页12