CSSrainbow.cn

Sharing what I know and learn about (X)HTML,CSS,JavaScript,MooTools,Dojo,jQuery,PHP,ASP,Java,Python and ∞.

案例演示 & 下载

MooTabs plugin ,基于MooTools »
MooTabs plugin ,基于MooTools

Demos & Downloads \ Tutorials \ MooTools

我今天提供的教程是以Chris Coyier 写的 Organic Tabs jQuery plugin为原型改写的MooTabs MooTools plugin 。 Organic Tabs,非常酷,可以展现大量的信息。它使你的标签不再那么“傻乎乎”,当我点击相应的标签对象,它对应的内容是富有动感的,平滑过渡的。同时也保持了清洁和富有语义的标记。 在这儿我就不多说了,...

View Demo » Download Files »

网站功能列表插件,基于MooTools or jQuery »
网站功能列表插件,基于MooTools or jQuery

Demos & Downloads \ Tutorials \ MooTools \ Tutorials \ jQuery

对于网站的功能列表模块,有许多的网站都有应用,它能够快速了解网站提供的服务或功能,准确的引导用户进入相关服务模块,以免用户进入迷宫,简单方便的互动了用户。 以前用Flash 实现 “特色项目” 或 “功能列表”的网站居多,自从jQuery的出现 ,给我们带来了简洁和强大的动画效果,有些方...

View Demo » Download Files »

MooColorPicker 颜色选择器插件 »
MooColorPicker 颜色选择器插件

Demos & Downloads

MooColorPicker 插件 是基于MooTools 开发的,它的作用是从颜色列表方块中选择颜色。我在以前的一篇的 《简单的颜色选项卡,基于CSS and MooTools 》文章中,介绍过类似的效果,功能无法与MooColorPicker 插件相比。不过它的有些思想和部分代码可用应用到“网页换肤” 中,这样写出来的程序更有可移植性。 如...

View Demo » Download Files »

网页随机换肤 »
网页随机换肤

Demos & Downloads \ Tutorials \ jQuery

我在上一篇《网页换肤, 基于MooTools or jQuery 》文章中,通过一个完整的实例讲解了一下网页换肤的原理。即,通过调用不同的样式表文件来实现不同的皮肤切换,并且需要将换好的皮肤记入Cookie中,这样用户下次访问时,就可以显示用户自定义的 皮肤了。 在 CSS9.NET博客上,IIduce写了一篇关于随机加载...

View Demo » Download Files »

网页换肤,基于MooTools or jQuery »
网页换肤,基于MooTools or jQuery

Demos & Downloads \ Tutorials \ MooTools

我们都知道WEB2.0是以人为核心线索的网,为了更好的增强用户体验,一些比较流行的SNS社会网络,非常重视用户自定义功能,例如自定义新闻内容,可以任意拖动新闻内容,还可以选择网页皮肤,例如:谷歌,雅虎,腾讯等都类似的功能。 网页换肤的原理是通过调用不同的样式表文件来实现不同的皮肤...

View Demo » Download Files »

灵活的等比例缩放图像类,基于MooTools »
灵活的等比例缩放图像类,基于MooTools

Demos & Downloads \ Tutorials \ MooTools

在本教程中,我们将解释如何按比例调整图像。 当前流行的就是使用JavaScript 库(MooTools,jQuery,ExtJS, script.aculo.us,YUI)来实现一些效果, 当然我今天的例子也是使用当前流行的MooTools来实现的。我把它写成MooTools Class形式是为了程序的灵活性和可扩展性。 实现思路 我们将使用一<img />标签来调整图...

View Demo » Download Files »

Google-Style之元素褪色(Element Fading),基于MooTools or jQuery »
Google-Style之元素褪色(Element Fading),基于MooTools or jQuery

Demos & Downloads \ Tutorials \ MooTools \ Tutorials \ jQuery

如图所示:Google-Style——元素褪色(Element Fading) 谷歌最近在他们的网页上推出了一个有趣的效果:左上角和右上角的导航条不显示了,直到您移动鼠标或离开search term box。为什么?我猜测,他们是希望自己的网页,尽可能的简单; 这样的好处就是搜索框立即给予关注,至少有一半的用户可能只需输...

View Demo » Download Files »

表单设计与滑动的标签(Labels),基于MooTools or jQuery »
表单设计与滑动的标签(Labels),基于MooTools or jQuery

Demos & Downloads \ Tutorials \ MooTools

对于表单的可用性设计,一直是Web设计人员研究的课题,如果你想了解更多关于Form Design的知识,我建议你看一下Yahoo的Luke Wroblewski 写的书《Web Form Design》, 人家是这方面的大牛,有许多的专题论文。 我们的设计灵感来自 Apple 重新设计的商品结帐表单。 我们实现的效果就是: input 的labels 水平滑动。这...

View Demo » Download Files »

让所有的浏览器都支持 HTML5 placeholder 属性,基于MooTools »
让所有的浏览器都支持 HTML5 placeholder 属性,基于MooTools

Demos & Downloads \ Code Snippets \ MooTools

随着HTML5发布,我们已经看到了HTML5会给Web开发标准带来最巨大的飞跃。如果您想了解更多关于HTML5和CSS3的知识,请看一下来自淘宝的空雁写的《揭秘HTML5和CSS3》会有您想要的东西。 我们今天是对HTML5中input和textarea所新增的placeholder属性进行讨论,placeholder属性的作用相当于输入框的输入提示。 我大概体...

View Demo » Download Files »

实现侧边栏滚动的多种技术,基于CSS,jQuery or MooTools »
实现侧边栏滚动的多种技术,基于CSS,jQuery or MooTools

Tutorials \ (X)HTML / CSS \ Demos & Downloads \ Tutorials \ MooTools

当我们,页面内容的篇幅很长的时候,我们需要拼命的向下滚动页面,鼠标滚动的次数过多,难免有些让人不耐烦。这样,就需要在文章的侧面需要一个“目录侧栏”,如果“目录侧栏”跟着滚动页面动作移动那就更好了,非常有利于用户体验,有很多方法去做“Number”。本文就告诉你实现侧边栏滚动的...

View Demo » Download Files »

 Page 1 of 2  1  2 »