time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > 其它JS框架 > 基于mootools1.3创意模仿新闻列表

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

时间:2011-04-22 23:26 点击:824次 字体:[ ]




实现原理:
    改变新闻面板的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();
//触发函数执行


本文地址 : http://www.fengfly.com/plus/view-198043-1.html
标签: mootools 新闻列表
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: