消息提示框,可自动消失
分类:电脑知识 发表于: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