基于mootools1.3创意模仿新闻列表

效果预览如下:我只测试了ie8 9 和火狐，不保证其他浏览器能运行，sorry!

• 最近热点
• 最近新闻
• 最近活动

• 天津情结仍延续 托马西:愿做中国足球的马可·波罗
• 天津情结仍延续 托马西:愿做中国足球的马可·波罗
• 天津情结仍延续 托马西:愿做中国足球的马可·波罗
• 天津情结仍延续 托马西:愿做中国足球的马可·波罗
• 泰达雨战墨尔本遭遇太多不公 小将失绝杀后悔莫及
• 泰达雨战墨尔本遭遇太多不公 小将失绝杀后悔莫及

• 泰达雨战墨尔本遭遇太多不公 小将失绝杀后悔莫及
• 泰达雨战墨尔本遭遇太多不公 小将失绝杀后悔莫及
• 泰达雨战墨尔本遭遇太多不公 小将失绝杀后悔莫及
• 泰达雨战墨尔本遭遇太多不公 小将失绝杀后悔莫及
• 天津情结仍延续 托马西:愿做中国足球的马可·波罗
• 天津情结仍延续 托马西:愿做中国足球的马可·波罗

• 生死时刻不得信任终消失 龙袍加于他身是否太勉强
• 生死时刻不得信任终消失 龙袍加于他身是否太勉强
• 生死时刻不得信任终消失 龙袍加于他身是否太勉强
• 生死时刻不得信任终消失 龙袍加于他身是否太勉强
• 天津情结仍延续 托马西:愿做中国足球的马可·波罗
• 天津情结仍延续 托马西:愿做中国足球的马可·波罗

实现原理:
    改变新闻面板的left或者top属性，用tween实现动画效果,效果还是蛮有特别的。在网上一个网站上发现这个效果，特意模仿了下来，还不错！

代码分析:

<div id="container">
        <ul id="tab-holder">
            <li>最近热点</li>
            <li>最近新闻</li>
            <li>最近活动</li>
        </ul>
        <div class="news-holder">
            <ul id="recent-updates-list" class="news-list">
                <li><a href="javascript:void(0)">天津情结仍延续 托马西:愿做中国足球的马可·波罗</a> </li>
                <li><a href="javascript:void(0)">天津情结仍延续 托马西:愿做中国足球的马可·波罗 </a></li>
                <li><a href="javascript:void(0)">天津情结仍延续 托马西:愿做中国足球的马可·波罗 </a></li>
                <li><a href="javascript:void(0)">天津情结仍延续 托马西:愿做中国足球的马可·波罗 </a></li>
                <li><a href="javascript:void(0)">泰达雨战墨尔本遭遇太多不公 小将失绝杀后悔莫及 </a></li>
                <li><a href="javascript:void(0)">泰达雨战墨尔本遭遇太多不公 小将失绝杀后悔莫及 </a></li>
            </ul>
            <ul id="recent-news-list" class="news-list">
                <li><a href="javascript:void(0)">泰达雨战墨尔本遭遇太多不公 小将失绝杀后悔莫及 </a></li>
                <li><a href="javascript:void(0)">泰达雨战墨尔本遭遇太多不公 小将失绝杀后悔莫及 </a></li>
                <li><a href="javascript:void(0)">泰达雨战墨尔本遭遇太多不公 小将失绝杀后悔莫及 </a></li>
                <li><a href="javascript:void(0)">泰达雨战墨尔本遭遇太多不公 小将失绝杀后悔莫及 </a></li>
                <li><a href="javascript:void(0)">天津情结仍延续 托马西:愿做中国足球的马可·波罗 </a></li>
                <li><a href="javascript:void(0)">天津情结仍延续 托马西:愿做中国足球的马可·波罗 </a></li>
            </ul>
            <ul id="recent-events-list" class="news-list">
                <li><a href="javascript:void(0)">生死时刻不得信任终消失 龙袍加于他身是否太勉强 </a></li>
                <li><a href="javascript:void(0)">生死时刻不得信任终消失 龙袍加于他身是否太勉强 </a></li>
                <li><a href="javascript:void(0)">生死时刻不得信任终消失 龙袍加于他身是否太勉强 </a></li>
                <li><a href="javascript:void(0)">生死时刻不得信任终消失 龙袍加于他身是否太勉强 </a></li>
                <li><a href="javascript:void(0)">天津情结仍延续 托马西:愿做中国足球的马可·波罗 </a></li>
                <li><a href="javascript:void(0)">天津情结仍延续 托马西:愿做中国足球的马可·波罗 </a></li>
            </ul>
        </div>
    </div>

CSS代码:

 *{margin: 0;padding: 0;font-family: 微软雅黑,Microsoft YaHei,Helvetica,Tahoma,StSun,宋体,SimSun,sans-serif;line-height: 1.5em;font-size: 14px;}
        ul li{list-style-type: none;list-style-position: outside; }
        a{ text-decoration: none; color: #466BAE;}
        a:hover{ text-decoration: underline;}
        #container {margin: 0 auto;width: 375px;border: 1px solid #c4c2c2; }
        ul#tab-holder li { float: left; width: 104px;height: 32px;line-height: 32px;border-left: 1px solid #c4c2c2;border-right: 1px solid #c4c2c2;margin-left: -1px;
            text-align: center; padding: 0 10px;font-weight: bold;color: #777676; cursor: pointer;background-color: #eee; }
        .news-holder {clear: left;overflow: hidden;position: relative; width: 420px; height: 150px;}
        .news-list{position: absolute; left: 0;top: 0;padding: 0px 10px 0 6px;height: 140px;width: 340px;}
        .news-list li {display: block; height: 18px;padding: 4px 0 0 13px;background: url("http://i.g-fox.cn/v131/images/disc.png") no-repeat scroll 0 center transparent; }
        .on{ background-color: #fff !important; }

JS代码: 这里主要需要注意的是防止用户连续点击触发器,设置一个locked变量，这样只有每次成功移动每个面板过后才能继续下次切换
，用到了mootools的chain函数，一个灰常好用的函数.还有就是data属性的值，一层层得嵌套，可以属性里面包含对象，对象里面在
有数组等等，只要注意格式就可以了，不难理解.
      最重要的还是循环添加给触发器添加事件的方法，我现在知道解决这个bug的方法用mootools就是
this.triggers[i].addEvent("type",this.函数.bindWithEvent(this,[i])).bindWithEvent是mootools提供的一个方法，我也不是
很了解.
      this.panels设置的目的是存储新闻面板,方便show函数改变其this.panels[i]的值.

 var newsComplex = {
            data: {
                panels: ['updates', 'news', 'events'],
                tweens: [
                     {
                         property: "left",
                         duration: 500
                     },
                     {
                         property: "top",
                         duration: 500
                     },
                     {
                         property: "left",
                         duration: 500
                     }
                    ],
                sets: [-340, -140, 415]
            },     //data属性存储函数体需要用到的值
            status: {
                current: 0,
                locked: false
            },
            start: function () {
                this.panels = [];
                this.triggers = $("tab-holder").getElements("li");   //触发器数组
                for (var i = 0; i < this.data.panels.length; i++) {
                    this.panels.push($("recent-" + this.data.panels[i] + "-list").set("tween", this.data.tweens[i])); // 每个新闻面板设置tween属性
                    if (i == 0) {                     
                        this.triggers[0].addClass("on");  //第一个触发器默然样式
                    } else {
                        this.panels[i].get("tween").set(this.data.sets[i]);  //设置其余新闻面板的left或者top属性
                    }
                    this.triggers[i].addEvent("click", this.show.bindWithEvent(this, [i]));  //每个触发器添加click事件
                }
            },
            show: function (e, at) {
                e.stop();
                if (at != this.status.current) {
                    if (!this.status.locked) {   //防止连续点击 
                        this.status.locked = true;
                        this.triggers[this.status.current].removeClass("on"); 
                        this.triggers[at].addClass("on").blur();     //失去光标焦点
                        this.panels[this.status.current].get('tween').start(this.data.sets[this.status.current]).chain(function (at) {
                            this.panels[at].get('tween').start(0).chain(function () { newsComplex.status.locked = false; });
                        } .bind(this, at));   //mootools的亮点,函数链,这样函数依次执行
                        this.status.current = at;
                    }
                }
            }
        };
        newsComplex.start();    //触发函数执行

     出来咋到的学生文章写得不好，还请大家谅解！谢谢,