基于 jQuery 的旗帜效果纵向多级导航菜单

星期天, 五月 10th, 2009

最近看了一些基于 jQuery 的好玩的导航菜单，然后就想到了这样一个效果的菜单，其实我也不知道该叫它什么效果，就叫旗帜效果 (flag style) 吧。 先来看看最终效果是什么样的： 演示(Demo) 一个导航菜单，最重要的是可访问性，其他的效果都是为了锦上添花的，所以首先我们要做一个纯 CSS 的纵向导航菜单，这样即使用户关闭了 JavaScript 也能无障碍的访问。 第一步： 一个语义化的 HTML 结构 [code lang="html"] <h2>Flag Navigation</h2> <ul id="nav" class="nav"> <li><a href="#">1 HTML</a></li> <li><a href="#">2 CSS</a> <ul> <li><a ...

Posted in JavaScript, WebDevelop | 3 Comments »

Circle Tag Cloud Plugin for jQuery

星期一, 五月 4th, 2009

昨天看到某个 blog 上一个 3D Tag Cloud 插件，效果很炫，是用 Flash 写的。很想把它移植到 JavaScript 来，不过尝试失败，最后得到的效果不甚理想，不过还是记录下来吧，也算是一个学习的过程。 *演示(Demo) *下载(Download) 这个效果是基于 jQuery 编写的，也用到了 GSGD 的 Easing Plugin (如果选择使用 jQuery 自带的 "linear" 或者 "swing" 效果的话则不需要包含此插件)。 首先需要一个适当的 html 结构： [sourcecode language="html"]<h2>Circle Tag Cloud</h2> <div id="tag_cloud"> <a id="tag1" href="#1" style="font-size: 20pt; color:blueviolet">UED</a> <a id="tag2" href="#2" style="font-size: 10pt; color:maroon">JavaScript</a> ...

Posted in JavaScript | 3 Comments »