//什么状况。CSDN的排版怎么这么多状况，还是本人太次？调整几次都没弄好。最后一遍了……
最近由于公司业务问题。须要做一些面向公众的平台，于是对UI要求会高一点，
对于传统的alert的这样的方式来提示用户操作错误显然会非常影响客户体验。于是做了一个小功能，来替代原本的alert。话不啰嗦，先上效果图。
实现原理非常easy。利用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; }}