码迷,mamicode.com
首页 > 编程语言 > 详细

javascript实现的一个信息提示的小功能/

时间:2014-12-15 17:22:40      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:javascript   体验   

//什么状况,CSDN的排版怎么这么多状况,还是本人太次?调整几次都没弄好,最后一遍了……

近期因为公司业务问题,需要做一些面向公众的平台,于是对UI要求会高一点,对于传统的alert的这种方式来提示用户操作错误显然会很影响客户体验,于是做了一个小功能,来替代原本的alert。话不啰嗦,先上效果图。bubuko.com,布布扣bubuko.com,布布扣


实现原理很简单,利用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{
<span style="white-space:pre">	</span>//将属性写到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(){
<span style="white-space:pre">		</span>//运动到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<oTarget[arr]?Math.ceil(temp):Math.floor(temp);
        } else {
            iCur = parseInt(getStyle(obj, arr));
        }
        if (isNaN(iCur)) {
            iCur = 0;
        }
        var speed = (oTarget[arr] - iCur) / 40;
        speed = speed > 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;
    }
}


javascript实现的一个信息提示的小功能/

标签:javascript   体验   

原文地址:http://blog.csdn.net/u010571913/article/details/41944659

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!