新鮮出爐的js tips提示效果

最後更新：2013-10-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

相容性已經測過：IE6\IE7\IE8\FF3\CHROME10
複製代碼代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body>
 
<input id='test'>

 
<a href='#' id='test2' onmouseover="tips.show('普通連結或按鈕提示-灰色-滑鼠離開消失-300像素', 'test2', null, '#000000', 300)" onmouseout="tips.hidden('test2')">普通連結或按鈕提示</a>

<script>
//提示訊息類
var tips = {
temp : {},
/***
* 彈出提示
*
* @param string msg 提示文字內容
* @param string id 要彈出提示的目標對象的id,如果id錯誤/null/false/0則主視窗彈出
* @param int time 定時消失時間毫秒數,如果為null/0/false則不定時
* @param string color 提示內容的背景顏色格式為#000000
* @param int width 提示窗寬度,預設300
*/
show : function(msg, id, time, color, width)
{
var target = this._get(id);
if(!target) { id = 'window'; }

//如果彈出過則移除重新彈出
if(this._get(id+'_tips')) { this.remove(id); }

//設定預設值
msg = msg || 'error';
color = color || '#ea0000';
width = width || 300;
time = time ? parseInt(time) : false;

if(id=='window') {
var y = document.body.clientHeight/2+document.body.scrollTop;
var x = (document.body.clientWidth-width)/2;
var textAlign = 'center', fontSize = '15',fontWeight = 'bold';
} else {
//擷取對象座標資訊
for(var y=0,x=0; target!=null; y+=target.offsetTop, x+=target.offsetLeft, target=target.offsetParent);
var textAlign = 'left', fontSize = '12',fontWeight = 'normal';
}

//彈出提示
var tipsDiv = this._create({display:'block',position:'absolute',zIndex:'1001',width:(width-2)+'px',left:(x+1)+'px',padding:'5px',color:'#ffffff',fontSize:fontSize+'px',backgroundColor:color,textAlign:textAlign,fontWeight:fontWeight,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id+'_text', innerHTML:msg, onclick:function(){tips.hidden(id);}});
document.body.appendChild(tipsDiv);
tipsDiv.style.top = (y-tipsDiv.offsetHeight-12)+'px';
document.body.appendChild(this._create({display:'block',position:'absolute',zIndex:'1000',width:(width+10)+'px',height:(tipsDiv.offsetHeight-2)+'px',left:x+'px',top:(y-tipsDiv.offsetHeight-11)+'px',backgroundColor:color,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id+'_bg'}));
if(id!='window') {
var arrow = this._create({display:'block',position:'absolute',overflow:'hidden',zIndex:'999',width:'20px',height:'10px',left:(x+20)+'px',top:(y-13)+'px'}, {id:id+'_arrow'});
arrow.appendChild(this._create({display:'block',overflow:'hidden',width:'0px',height:'10px',borderTop:'10px solid '+color,borderRight:'10px solid #fff', borderLeft:'10px solid #fff',filter:'Alpha(Opacity=70)',opacity:'0.8'}));
document.body.appendChild(arrow);
}

//標記已經彈出
this.temp[id] = id;

//如果定時關閉
if(time) { setTimeout(function(){tips.hidden(id);}, time) }

return id;
},
/***
* 隱藏提示
*
* @param string id 要隱藏提示的id,如果要隱藏主視窗提示id為window,如果要隱藏所有提示id為空白即可
*/
hidden : function(id)
{
if(!id) { for(var i in this.temp) { this.hidden(i); } return; }
var t = this._get(id+'_text'), d = this._get(id+'_bg'), a = this._get(id+'_arrow');
if(t) { t.parentNode.removeChild(t); }
if(d) { d.parentNode.removeChild(d); }
if(a) { a.parentNode.removeChild(a); }
},
_create : function(set, attr)
{
var obj = document.createElement('div');
for(var i in set) { obj.style[i] = set[i]; }
for(var i in attr) { obj[i] = attr[i]; }
return obj;
},
_get : function(id)
{
return document.getElementById(id);
}
};

window.onload = function(){
tips.show('主視窗提示-綠色-不定時-300像素', null, null, '#009900', 300);
tips.show('表單報錯提示-紅色-3000毫秒消失-250像素', 'test', 3000, '#ea0000', 250);
}
document.onclick = function(){
tips.hidden();
}
</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More