花茶花茶 Think

Javascript 实现可拖动的日历控件

admin — Sun, 11 Jul 2010 00:30:42 +0000

　　上图是默认css的显示效果，这个日历控件已经在 Safari, Firefox, Opera 和 Internet Explorer 测试过，均可使用。

　　关键代码下载地址：
　　calendar.js(15k)
　　calendar.rc4.js(33k)
　　calendar.compat.js
　　mootools.js(43k)

　　使用方法：关键代码

　　CSS 文件可自定义修改，默认CSS文件：stylesheet

　　官网地址：electricprism
　　

Hover 时，图片背景的集中处理

admin — Wed, 07 Jul 2010 11:03:33 +0000

　　CSS 基础知识，高手请绕边。如上所示，要实现图片的鼠标 hover 事件，一般是为图片链接添加hover后的图片。如上图的 YouTube 标志效果。在图片的制作中一般要为每个图片链接添加两张图片，5个链接就要10张图片，这不仅细微的拖慢了页面的加载速度，在制作过程中也会有诸多不便，如图片的对齐问题，而将图片背景的集中处理是个很好的解决方案。

　　以上的效果背景图片为：

　　关键性的代码：
　　icon a{width:20px; height:20px; padding:0; background:url(social-icons.png) no-repeat;text-indent:-9999px; overflow:hidden;}
　　icon a:hover{background-position:0 -22px;}
　　twitter a{background-position:-20px 0;}
　　twitter a:hover{background-position:-20px -22px;}
　　flickr a{background-position:-40px 0;}
　　flickr a:hover{background-position:-40px -22px;}
　　facebook a{background-position:-60px 0;}
　　facebook a:hover{background-position:-60px -22px;}
　　. . . . . .
　　
　　关键的代码在于对 background-position 这个属性的操作，每个按钮对应不同的背景图片相应位置。

　　网站地址： Android and Me

Ars Technica 网站tab页

admin — Mon, 05 Jul 2010 02:52:21 +0000

　　这次收集的是一个网站的tab内容页，来自于 Ars Technica 这个tab特色在于它用特色的图片代替了生硬的文字，而且每张图片极具特色，唯一不足的地方时它没有使用 AJAX 技术实现无刷新实现内容的转换，不然的话会有更好的用户体验。

　　这种设计非常适合于web2.0的系统，用于对内容的分类显示，给用户更好的用户体验，但是对图片的选择也十分重要，要对应用户群设计相应的图片，这个tab页明显是对应对网络非常了解的用户。Apple公司的logo，微软公司的logo等等。对于普通可能不会了解，这个时候可能要添加相应的提示文字。

　　网站地址： Ars Technica

Android and Me 网站登录界面设计

admin — Sun, 04 Jul 2010 07:37:59 +0000

　　Android and Me这个是属于关注Android设计及周边的新闻网站，确切的说是一个博客，虽然说博客使用登录系统并不是多，但是它的这个设计于网页最顶端的登录web part十分有新意：

　　首先，是那个Android机器人的头像，在每次登录时，它都会发生变化，这是PHP实现的一个功能，让用户感觉很有新意，很有web2.0的设计概念。记得日本的一个视频网站ニコニコ動画(9) 也有这个功能，面向年轻用户的网站可以考虑这个设计。

　　其次，文本输入框的设计，将文字嵌入了文本输入框内，看起来十分简洁，可能是只有一个字母的关系，中文实现起来就可能是两个词了：“用户”、“密码”。

　　其余的设计也以简洁为主，save实现了记住密码的功能。整个设计中，那个Android机器人头像是点睛之笔。

　　网站地址： Android and Me
　　DEMO下载： uushare

Hello world！

admin — Sun, 04 Jul 2010 02:08:02 +0000

　　欢迎使用 WordPress 。这是系统自动生成的演示文章。编辑或者删除它，开始您的博客！

　　IT界不成文的约定，一项新技术的第一个demo都是用“Hello world！”来实现，这篇文章留作纪念。