基于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(); //触发函数执行
出来咋到的学生文章写得不好，还请大家谅解！谢谢,
