纯CSS实现易拉罐3D滚动效果

2010年03月29日 by 张 鑫旭 阅读 77724 次, 今日 5 次

本文展示并讲解纯CSS实现的超炫超酷的易拉罐3D滚动效果,向您展示CSS的惊人潜力。效果简述为:横向移动滚动条,易拉罐随着滚动条的滚动,自身也进行着效果逼真的3D滚动。
本文提供丰富的插图以及必要的demo页面,希望能对您的学习有所帮助。

阅读全文…

纯CSS实现侧边栏/分栏高度自动相等

2010年03月25日 by 张 鑫旭 阅读 133614 次, 今日 3 次

为了表现的美观或是一些功能的需要,我们经常希望侧边栏/分栏的高度保持一致。我们可能会使用min-height属性,IE6不支持min-height但是height会自动撑高,所以min-height + _height的组合也是常用手段之一;另外就是使用背景图片了,利用背景图片的垂直平铺,可以模拟分栏的等高背景效果,但是,此方法对布局宽度有一定的要求,如果布局宽度改变,背景图片可能也要做一番修改。但是这些方法都有局限性,没有从根本上解决问题。
本文就将真是分栏高度相等的的技术,使用margin负值实现任意分栏的高度自动相等。提供详尽的插图,代码示意。提供必要的demo,希望能对您的学习有所帮助。

阅读全文…

CSS+JavaScript实现页面不同布局的切换

2010年03月25日 by 张 鑫旭 阅读 80343 次, 今日 3 次

我们平时使用windows操作系统,应该见过文件才查看功能,我们可以选择“平铺”、“图标”、“列表”、“详细信息”等,这是一个不错的功能,可以让用户自定义一些自己喜欢的偏好的显示方式,我们再web页面上,同样可以做。这可能说是一种提高用户体验的方法。
本文就将展示如何在web页面上轻松的实现布局的切换,查看方式的转换。提供详尽的插图,提供详尽的demo,以及对应的代码,希望能对您有所帮助。

阅读全文…

JavaScript实现最简单的拖拽效果

2010年03月24日 by 张 鑫旭 阅读 285939 次, 今日 5 次

本文用非常简洁的代码展示了如何用JavaScript实现元素的拖拽效果。本文拖拽js代码封装良好,使用方便,效果也不错,相信可以对一些初学者给予不小的帮助,另外提供必要的插图,代码展示,demo页面及文件下载,希望对您的学习有所帮助。

阅读全文…

自己写的无图片版jQuery zxxbox弹出框插件

2010年03月22日 by 张 鑫旭 阅读 139285 次, 今日 2 次

jQuery zxxbox 插件截图 张鑫旭-鑫空间-鑫生活
虽然市面上的facebook效果的boxy弹出层插件不少,但是普遍文件较大,而且还需要调用额外的图片链接(不止一个,还有半透明渲染)以及CSS文件。对于我这样很注意文件大小优化的人来说是无法容忍的,趁着这次学习jQuery的一些知识,我就花了一些时间写了款jQuery插件,我将其命名为zxxbox弹出框插件,非常小巧,使用方便,无额外的CSS或是图片调用,能满足大部分的弹出框效果功能,可以说从效果上讲,也是一款很不错的jQuery插件。
本文详细介绍词插件的使用方法,提供必要的demo,提供原始文件下载,希望能对您有所帮助。

阅读全文…

中国古代道家思想与网页重构的思考

2010年03月18日 by 张 鑫旭 阅读 111980 次, 今日 3 次

道家是以老子、庄子为代表的中国春秋战国时期诸子百家中最重要的思想学派之一。道家思想以其独特的宇宙、社会和人生领悟,在哲学思想上呈现出永恒的价值与生命力。
在众多的道家思想内容中,其非常重要的一个核心思想:顺其自然,无为而治,我是非常之推崇,这种哲学思想已经深深地影响到了自己的为人处事,思考问题的方式。
本文就将通过“顺其自然,无为而治”的思想,讲述我对网页页面重构的一些思考。揭示一些规律,希望能对您有所帮助。

阅读全文…

让所有浏览器支持HTML5 video视频标签

2010年03月17日 by 张 鑫旭 阅读 653579 次, 今日 24 次

HTML5 video标签可以让视频如同图片那样使用一个标签就可以轻轻松松地嵌入到页面上,然而目前只有Safari之类的浏览器支持,主流的IE浏览器是路边的电线杆——靠边站。然而,优秀的技术先驱们,发动他们的智慧,通过一个js,实现了所有浏览器下都可以使用video标签,本文就是将如何使用使得所有的主流浏览器都支持HTML5 video标签,提供必要的截图,提供demo页面,提供原JavaScript文件下载,希望能对您的学习有所帮助。

阅读全文…

纯CSS实现各类气球泡泡对话框效果

2010年03月13日 by 张 鑫旭 阅读 248176 次, 今日 8 次

边框法复杂应用 张鑫旭-鑫空间-鑫生活

本文的知识点较多,内容也较多,展现了CSS惊人的力量,如果使用纯粹的CSS实现视觉良好,体验上佳的web界面。讲解了“字符法”以及“边框法”,丰富示例,逐层深入,非常细致的讲解了实现的原理,方法,代码,注意点等。
本文提供详尽的插图,丰富的按钮,提供详尽的demo,希望你对您有所帮助。

阅读全文…

JS HEX十六进制与RGB, HSL颜色的相互转换

2010年03月12日 by 张 鑫旭 阅读 242658 次, 今日 5 次

本文逐层深入,讲述使用JavaScript对HTML与CSS中的颜色值表示方法(十六进制形式与RGB形式)之间的进行相互的转化。提供必要的插图,提供demo以及源文件下载,希望能对您有所帮助。

阅读全文…

CSS实现兼容性的渐变、高光等文字效果

2010年03月12日 by 张 鑫旭 阅读 59159 次, 今日 1 次

CSS实现文字渐变效果 张鑫旭-鑫空间-鑫生活
对于很多网站的大标题都是有一定的文字效果的,比如渐变就是常用的效果,而这些效果往往都是由世界上最厉害的美容产品photoshop做出来的,一个效果就是一张图片,所以,要是要10个不同的文字标题,可能就要制作十张带有渐变效果的文字图片了。

而实际上,无需使用多张photoshop图片,只要一张小小的图片在配合CSS就能实现各个文字内容的渐变效果。
本文就将展示如何使用CSS,配合一张小小的图片实现文字的各种上佳的效果,没有JavaScript,没有flash,纯粹的CSS,兼容各个浏览器,Firefox,chrome,Safari,甚至已经被微软做了葬礼的IE6也可以降服。

阅读全文…