在网页中实现伸缩式信息提示

最新推荐文章于 2025-12-22 21:38:10 发布

原创最新推荐文章于 2025-12-22 21:38:10 发布 · 743 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #javascript #border #html #div

本文介绍了一种简单的网页信息提示实现方法，通过HTML、CSS及JavaScript代码，在页面底部弹出一个自下而上的信息提示框，适用于网站登录后的消息提醒。

在网页中如何实现信息提示呢，就像有些网站你登录上去后，会在右下角产生一个自下而上打开的信息提示一样，其实实现它很简单。用下面的代码看看效果吧。

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META http-equiv=pragma content=no-cache>
<style>
#menu{position:absolute;bottom:-100;width:150;right:0;border:0pt solid black;
background-color:#CCCCCC;layer-background-color:no;font: 9pt/20pt "宋体";}
</style>

</HEAD>

if (document.all){
themenu=document.all.menu.style
}else{
themenu=document.layers.menu
}

function pull(){
pullit=setInterval("pullengine()",100)
}

function hidden(){
themenu.pixelBottom = -100;
}
function pullengine(){
if (document.all&&themenu.pixelBottom<0)
themenu.pixelBottom+=5
else if(document.layers&&themenu.bottom<0)
themenu.bottom+=5
else if (window.pullit)
clearInterval(pullit)
}
</script>
</BODY>
</HTML>