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