.

消息提示框,可自动消失
分类:电脑知识 发表于:2010-12-24 09:55:50 评论(0)


消息提示框,可自动消失。

<style type="text/css">

#show_feedBack_message{

border:1px solid #f00;

background:#fc0;

line-height:18px;

padding:3px;font-size:12px;

}

*{font-size:12px;}

ol li{margin:15px 0px;}

ol li a{color:#00f;font-size:14px;}

</style>

<script type="text/javascript">

function feedBackMessage(message,x,y,delay){

if(!message) return;

//只允许百分数或数值参数

x=/\d{1,2}%|100%|left|right/.test(x)?x:(parseInt(x)||0)+"px";

y=/\d{1,2}%|100%|top|bottom/.test(y)?y:(parseInt(y)||0)+"px";

delay=parseInt(delay)||-1;

var fdDiv=document.getElementById(´show_feedBack_message´);

if(!fdDiv){

var showMessage=document.createElement("<div id=´show_feedBack_message´ style=´z-index:10000;filter:alpha(opacity=100);position:absolute;white-space:nowrap´></div>");

document.body.appendChild(showMessage);

fdDiv=document.getElementById(´show_feedBack_message´);

}

if(feedBackMessage.timer){clearInterval(feedBackMessage.timer)}

fdDiv.innerHTML=message;

fdDiv.style.display="";

var docWidth=document.documentElement.scrollWidth>document.documentElement.clientWidth?document.documentElement.scrollWidth:document.documentElement.clientWidth;

var docHeight=document.documentElement.scrollHeight>document.documentElement.clientHeight?document.documentElement.scrollHeight:document.documentElement.clientHeight;

if(/left|right/.test(x)){

x=(x=="left")?"0px":(docWidth-fdDiv.offsetWidth)+"px";

}

if(/top|bottom/.test(y)){

y=(y=="top")?"0px":(docHeight-fdDiv.offsetHeight)+"px";

}

fdDiv.style.left=x;

fdDiv.style.top=y;

fdDiv.filters.Alpha.Opacity=100;

//渐隐效果

var step=parseInt(delay/100);

var alpha=fdDiv.filters.Alpha.Opacity;

if(delay!=-1){

feedBackMessage.timer=setInterval(function(){

if(fdDiv.filters.Alpha.Opacity>0){

fdDiv.filters.Alpha.Opacity--

}else{

clearInterval(feedBackMessage.timer);

fdDiv.style.display="none"

}

},step);

}

}

</script>

默认设置)显示位置:左上角 消失时间:不消失

<a href="#" onclick="feedBackMessage(´消息提示测试1......´);return false">消息提示测试1</a>

显示位置:left:200px,top:200px 消失时间:5秒后

<a href="#" onclick="feedBackMessage(´消息提示测试1......´,´200´,´200´,5000);return false">消息提示测试2</a>

显示位置:页面右上部 消失时间:3秒后

<a href="#" onclick="feedBackMessage(´消息提示测试2......´,´right´,´top´,3000);return false">消息提示测试3</a>

显示位置:left:50%,top:50% 消失时间:2秒后

<a href="#" onclick="feedBackMessage(´消息提示测试3......´,´50%´,´50%´,2000);return false">消息提示测试4</a>

显示位置:left:500px,top:200px 消失时间:不消失

<a href="#" onclick="feedBackMessage(´消息提示测试4......´,´500´,´200´,-1);return false">消息提示测试5</a>

函数语法:feedBackMessage(Message,X,Y,Delay)

参数介绍:

Message:必填参数。该参数为要显示的消息内容,可以为html内容

X:水平方向的位置,可以是数值如50,250等,也可以是百分比如50%,或者是以下两个参数:left(信息框左侧紧邻页面左侧),right(信息框右侧紧邻页面右侧)。默认为left。

Y:垂直方向的位置,可以是数值,也可以是百分比,或者是以下两个参数:top(信息框顶部紧邻页面顶部),bottom(信息框底部紧邻页面底部)。默认为top。

Delay:显示时间,即多长时间后消失,单位为毫秒,如5000即5秒后消失,设定为-1则永不消失。默认为-1

  
邮箱: 密码: