消息数量提示html,html消息提示淡入淡出

html部分

js部分

/*提示信息框动态效果*/

var topt = 100;

var opacity = 0;

//初始化数据

function initmsbox(info) {

topt = 100;

opacity = 0;

opacity1 = 1;

$("#msbox").html(info);

$("#msbox").css({ 'display': 'block' });

appearmsbox();

}

//出现信息框

function appearmsbox() {

topt += 1;

opacity += 0.05;

if (opacity < 1) {

setTimeout("appearmsbox()", 50);

}else {

disappearmsbox();

}

$("#msbox").css({ 'top': String(topt) + 'px' });

$("#msbox").css({ 'opacity': String(opacity) });

}

//隐藏信息框

function disappearmsbox() {

opacity -= 0.05;

if (opacity > 0.05) {

setTimeout("disappearmsbox()", 100);

}else {

opacity = 0;

$("#msbox").css({ 'display': 'none' });

}

$("#msbox").css({ 'opacity': String(opacity) });

}

initmsbox('文字');

css部分

#msbox{width:200px;height:40px;background-color:#f5f5f5;display:none;text-align:center;line-height:40px;color: #000;}