-
We are concerned Rich Web Design, AJAX, jQuery, Interactive Design.
-
Javascript 实现可拖动的日历控件
上图是默认css的显示效果，这个日历控件已经在 Safari, Firefox, Opera 和 Internet Explorer 测试过，均可使用。
关键代码下载地址：
calendar.js(15k)
calendar.rc4.js(33k)
calendar.compat.js
mootools.js(43k)使用方法： 关键代码
<head>
<script type=”text/javascript” src=”mootools.js”></script>
<script type=”text/javascript” src=”calendar.js”></script>
<script type=”text/javascript”>
window.addEvent(‘domready’, function() { myCal = new Calendar({ date: ‘d/m/Y’ }); });
</script>
</head>
<body>
<input id=”date” name=”date” type=”text” />
</body>CSS 文件可自定义修改，默认CSS文件：stylesheet
官网地址：electricprism
- 发表评论
-
Hover 时，图片背景的集中处理
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页
这次收集的是一个网站的tab内容页，来自于 Ars Technica 这个tab特色在于它用特色的图片代替了生硬的文字，而且每张图片极具特色，唯一不足的地方时它没有使用 AJAX 技术实现无刷新实现内容的转换，不然的话会有更好的用户体验。
这种设计非常适合于web2.0的系统，用于对内容的分类显示，给用户更好的用户体验，但是对图片的选择也十分重要，要对应用户群设计相应的图片，这个tab页明显是对应对网络非常了解的用户。Apple公司的logo，微软公司的logo等等。对于普通可能不会了解，这个时候可能要添加相应的提示文字。
网站地址： Ars Technica
- 发表评论
-
Android and Me 网站登录界面设计
Android and Me这个是属于关注Android设计及周边的新闻网站，确切的说是一个博客，虽然说博客使用登录系统并不是多，但是它的这个设计于网页最顶端的登录web part十分有新意：
首先，是那个Android机器人的头像，在每次登录时，它都会发生变化，这是PHP实现的一个功能，让用户感觉很有新意，很有web2.0的设计概念。记得日本的一个视频网站 ニコニコ動画(9) 也有这个功能，面向年轻用户的网站可以考虑这个设计。
其次，文本输入框的设计，将文字嵌入了文本输入框内，看起来十分简洁，可能是只有一个字母的关系，中文实现起来就可能是两个词了：“用户”、“密码”。
其余的设计也以简洁为主，save实现了记住密码的功能。整个设计中，那个Android机器人头像是点睛之笔。
网站地址： Android and Me
DEMO下载： uushare - 发表评论
-
Hello world！
欢迎使用 WordPress 。这是系统自动生成的演示文章。编辑或者删除它，开始您的博客！
IT界不成文的约定，一项新技术的第一个demo都是用“Hello world！”来实现，这篇文章留作纪念。
- 发表评论
Old Entries