javascript實現的一個資訊提示的小功能/

javascript實現的一個資訊提示的小功能/

//什麼狀況，CSDN的排版怎麼這麼多狀況，還是本人太次？調整幾次都沒弄好，最後一遍了……

近期因為公司業務問題，需要做一些面向公眾的平台，於是對UI要求會高一點，對於傳統的alert的這種方式來提示使用者操作錯誤顯然會很影響客戶體驗，於是做了一個小功能，來替代原本的alert。話不囉嗦，先上。

實現原理很簡單，利用js產生一個div，然後在需要提示的時候從top：0，的地方開始運動，運動到螢幕中間的時候等待一秒鐘再往上隱沒，連續點擊多次的話就上第一個圖一樣，會有些重疊，在提示使用者錯誤操作方面的體驗還是可以。下面就放上源碼：

調用起來也很方便，引入後調用showTip（內容）方法即可，本例中用了多層漸層，但是在IE8 的時候顯示只有單層顏色，稍顯單調。（註：後面幾個方法是本例依賴的運動架構，為方面調用才一起放上來了）

/** * Created by zhou on 2014-12-09. */function showTip(content){    var left = parseInt((document.body.clientWidth - 300)/2);    var top = parseInt((document.body.clientHeight - 50)/2);    var tipDiv = document.createElement("div");    tipDiv.className = "tip";    tipDiv.innerHTML = content;    if(!document.head){//IE8 不支援style.innerHTML的寫法，所以，如果瀏覽器是IE8可以採用js賦屬性的方法處理        //document.head的寫法不相容IE8以下產品，所以這種寫法可以擷取IE版本是否在8以下，        tipDiv.style.width = "300px";        tipDiv.style.height = "50px";        tipDiv.style.border = "1px solid blue";        tipDiv.style.lineHeight = "50px";        tipDiv.style.textAlign = "center";        tipDiv.style.zIndex = "9999";        tipDiv.style.position="absolute";        tipDiv.style.top = 0;        tipDiv.style.left = left +"px";        tipDiv.style.backgroundColor = "#A793FF";        tipDiv.style.filter="progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#3d69ff,endColorStr=white);}";    }else{

//將屬性寫到CSS樣式的好處在於：當某個屬性在多個瀏覽器中相容不一樣的時候不用根據寫js邏輯代碼。        var styleStr = ".tip{  width: 300px; height: 50px; border:1px solid blue; line-height: 50px;text-align: center;"+            "z-index: 9999;  top:0; left:"+left+"px;filter:alpha(opacity=0); opacity:0.5;position: absolute;"+            "background-color: #3d69ff; background: -webkit-linear-gradient(top, #3d69ff, #a793ff,#a793ff,#cac2ff,white);"+            "background: -moz-linear-gradient(top, #3d69ff ,#a793ff,#a793ff,#cac2ff,white);"+            "background: -ms-linear-gradient(top, #3d69ff, #a793ff,#a793ff,#cac2ff,white);"+            "background: linear-gradient(top, #3d69ff, #a793ff,#a793ff, #cac2ff,white); "+            "filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#3d69ff,endColorStr=white);} ";        var style = document.createElement("style");        style.innerHTML = styleStr;        document.head.appendChild(style);    }    document.body.appendChild(tipDiv);    doMove(tipDiv,{top:top,opacity:100},function(){        setTimeout(function(){            doMove(tipDiv,{top:0,opacity:0},function(){

//運動到top為0 的時候要注意將該組件刪除，否則會造成大量垃圾，佔用資源                tipDiv.parentNode.removeChild(tipDiv);            });        },1000);    });}function doMove(obj, oTarget, fn) {    if (obj.timer) {        clearInterval(obj.timer);    }    obj.timer = setInterval(function () {        Move(obj, oTarget, fn)    }, 10)}function Move(obj, oTarget, fn) {    var iCur = 0;    var arr = "";    var bStop = true;    for (arr in oTarget) {        if (arr == "opacity") {            //解決Google chrome不相容問題（Google擷取opacity會出現一些誤差，透明度無法達到指定數值）            var temp = parseFloat(getStyle(obj, 'opacity')) * 100;            iCur = temp 0 ? Math.ceil(speed) : Math.floor(speed);        if (oTarget[arr] != iCur) {            bStop = false;        }        if (arr == "opacity") {            obj.style.filter = "alpha(opacity:" + (iCur + speed) + ")";            obj.style.opacity = (iCur + speed) / 100;        } else {            obj.style[arr] = iCur + speed + "px";        }    }    if (bStop) {        clearInterval(obj.timer);        obj.timer = null;        if (fn) {            fn();        }    }}function getStyle(obj, property) {    if (obj.currentStyle) {//For IE        return obj.currentStyle[property];    } else if (window.getComputedStyle) {//For FireFox and chrome        propprop = property.replace(/([A-Z])/g, "-$1");        propprop = property.toLowerCase();        return document.defaultView.getComputedStyle(obj, null)[property];    } else {        return null;    }}