本文展示了一个使用HTML5和JavaScript实现的动态消息推荐模块。该模块通过加载外部HTML文件来更新推荐内容，并利用淡入淡出效果及宽度变化增强用户体验。文章详细介绍了如何用jQuery选择器操作DOM元素，实现元素的动态加载、链接地址修正等功能。
查看效果：http://www.gbin1.com/technology/html/20120328crazyhtml5js/index.html
// html
<div id="msgwrap">
<span id="title">今日推荐</span><a id="msgclose" href="#"> </a>
<div id="latest"></div>
</div>
// script
// Today's recommendation
var
msgclose =
$(
'#msgclose');
var
msg =
$(
'#msgwrap');
var
latest =
$(
'#latest');
latest.
load(
'/portfolio/lastest.html .includetitle',
function() {
latest.
find(
'.includetitle').
hide();
var
aobjs =
latest.
find(
'a');
aobjs.
each(
function(){
var
srcval =
$(
this).
attr(
'href').
replace(
'..',
'');
$(
this).
attr(
'href',
srcval);
});
});
setTimeout(
function(){
msgclose.
fadeIn();
msgclose.
click();},
10*
1000);
msgclose.
toggle(
function() {
msg.
stop().
animate({
width:
'+=250',
bottom:
'+=20px'},
500,
function() {
latest.
find(
'.includetitle').
eq(
getRan(
4)).
fadeIn();
});
$(
'#msgclose').
css({
'background-image':
'url("/gbin1/themes/gbin1_3column/images/x_icon.png")'});
},
function() {
$(
'#latest').
find(
'.includetitle').
hide();
msg.
stop().
animate({
width:
'-=250',
bottom:
'-=20px'},
500);
$(
'#msgclose').
css({
'background-image':
'url("/gbin1/themes/gbin1_3column/images/icon_plus.png")'});
});
function
getRan(
n){
return
Math.
floor(
Math.
random()*
n+
1);
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
