Moo.fx滑动效果选项卡

1. 样式定义?

body {color: #333;font-size: 11px;font-family: verdana;}a {color: #fff;text-decoration: none;}a:hover {color: #DFE44F;}p {margin: 0;padding: 5px;line-height: 1.5em;text-align: justify;border: 1px solid #73A405;}#wrapper {width: 800px;margin: 0 auto;}.box {background: #fff;}.boxholder {clear: both;padding: 5px;background: #8DC70A;}.tab {float: left;height: 32px;width: 102px;margin: 0 1px 0 0;text-align: center;background: #8DC70A url(images/greentab.jpg) no-repeat;}.tabtxt {margin: 0;color: #fff;font-size: 12px;font-weight: bold;padding: 9px 0 0 0;}

?

2. 引入 JS 脚本

<script type="text/javascript" src="scripts/prototype.lite.js"></script><script type="text/javascript" src="scripts/moo.fx.js"></script><script type="text/javascript" src="scripts/moo.fx.pack.js"></script>

?

3. 定义初始化函数

function init() {var stretchers = document.getElementsByClassName('box');var toggles = document.getElementsByClassName('tab');var myAccordion = new fx.Accordion(toggles, stretchers, {opacity: true, height: true, duration: 600});//hash functionsvar found = false;toggles.each(function(h3, i){var div = Element.find(h3, 'nextSibling');if (window.location.href.indexOf(h3.title) > 0) {myAccordion.showThisHideOpen(div);found = true;}});if (!found) myAccordion.showThisHideOpen(stretchers[0]);}

?

4. 定义 HTML 元素

<div id="wrapper"><div id="content"><div id="test" title="first"><h3 title="second"><a href="#">second</a></h3></div><div title="third"><a href="#">third</a></h3></div><div title="fourth"><a href="#">fourth</a></h3></div><div name="code"><script type="text/javascript">Element.cleanWhitespace('content');init();</script>

?

6.?效果预览

?

7. Demo 下载

附件 demo，欢迎下载。

?

8. 探讨

不可否认，该选项卡的渐变滑动效果确实很靓，但是各个选项卡的选中和未选中状态均一样，这会给人一种难以区分的错觉，也许这是它的不足吧，又或者是本人尚未深入研究，暂时仍不知道如何设置或者修改。

如果大家知道，望不吝赐教。

?

?

-------------------------------------------------

Stay Hungry, Stay Foolish!

Afa

May 18th, 2010

-------------------------------------------------

?

2 楼 yarafa 2011-01-09 是别人做的好，我只是引用而已