JavaScript must be enabled in order for you to view our website. However, it seems JavaScript is either disabled or not supported by your browser. Please enable JavaScript by changing your browser options, then try again.

嗨!你的浏览器没有支持JavaScript,也许你是考虑到安全性或避免广告的麻烦,但如今JavaScript已经成为WEB技术里必不可少的环节,如果你不开启对JavaScript的支持,恐怕是给自己增加麻烦,比如说,你将无法正常访问GOOGLE的很多服务,也无法浏览这个BLOG。建议使用Firefox浏览器,它拥有最好的JavaScript解释能力和安全性。

受形势所迫,目前不敢跟G*F*W大神死掐,这里的文章已经全部搬迁至用wordpress做的新blog,域名是www.limboy.com,RSS不变,以后的更新也会在新的BLOG进行,感谢Blogger这几个月来带给我的诸多乐趣。See you Google Blogger, sometime somewhere
  • Dexter.Yy的人物卡
  • Male Martian
  • Front-end Web Developer Lv5 / Web Designer Lv4 / PC Gamer Lv12 / RPG fan Lv7 / Otaku Lv3 /Reader Lv13
  • Height 5'10", Weight 150lbs, Alignment: CN
  • Worship Oghma,Tymora
  • Faction: The Free League, Sensate, Technocracy
  • Language: Chinese(common,wuhan), Chinglish, JavaScript, xhtml, XML/XSL, css, php, ruby, actionscript, vb, lua...
Abilities:
  • STR:12(+1)
  • DEX:6(-2)
  • CON:15(+2)
  • INT:17(+3)
  • WIS:12(+1)
  • CHA:13(+1)
Motto:
  • Lives Are Roleplaying Games
  • All We Really Wanna Do Is
  • Make The Perfect Choice
  • Get The Good Rolls
  • And Enjoy The Games

厚道的友情提示:点击这里可以翻页

Game
Geek
Search
网络
YY in Limbo
最深的地下城

星期六, 三月 03, 2007

YY流界面之动态图标导航栏

做这个导航栏的初衷,是想在公司产品的后台界面里,模仿MAC OS X系统的dock效果,所谓dock,就是OS X桌面底部那条显眼的工具栏,我的UBUNTU桌面里也有类似的效果……

实际上我也没用过MAC,所以是凭想象做的,演示页面在此:
http://www.ntrpg.org/yy/yy/demo/iconmenu.htm

右上角的导航栏是默认的效果,鼠标滑过时图标变大,会推挤旁边的图标。

下面第一排去掉了推挤效果。

第二排加入了左右移动的功能,图标的数量远远超出页面的宽度,只显示其中一部分,在导航栏上左右移动鼠标时,整个导航栏会向相反方向滑动,显示出隐藏的图标。

第三排把移动的操作改到了左右两侧的箭头,鼠标停留在箭头上时,导航栏就会向对应的方向滑动,鼠标离开箭头时滑动停止,当滑动到最末端的图标时,自动停止。


3 条评论:

Epay 说...

请教一下:请问注释栏延迟淡出并呈现兰色是怎么弄的?

Dexter.Yy 说...

BLOG上的效果么,那个是用了现成的脚本,叫sweet-titles

实际上那不是注释栏,是把所有页面元素上的'title'属性移除,换成自定义的'tip'属性,然后加上鼠标滑过和滑出事件,触发事件时会生成了一个DIV显示在鼠标坐标上……不过在IE里运行速度很慢……

Epay 说...

哦 原来如此,既然速度慢...就不弄了吧