消息通知框(JavaScript+css3)

标签：style   http   color   os   java   io   for   ar   2014   

最近给公司的项目配上了消息回馈的信息框.觉得还不错就拿出来和大家分享下.

JavaScript部分:

出入的参数除了allnwesID其他的都是缺省参数,里面有默认值.可自行修改.单击可以缩小消除掉

//消息条  整体的class="zwei_prompt"  标题class="zwei_prompt_title" 内容class="zwei_prompt_content"
//news = new zwei.News({
//    "allnewsId": "父亲元素id",
//    "title": "标题str",
//    "content": "内容str",
//    "color": "black",
//    "interval": "存在时间int"
//});
    zwei.News = function (param) {
        this.content = param.content || "你到底想说什么?!";
        this.title = param.title || "天外来音";
        this.interval = param.interval || 3;
        this.color = param.color || "black";
        this.clickpass = false;
        this.allnews = document.getElementById(param.allnewsId);

        this.showEnd = function (news) {
            if (this.clickpass === false) {
                setTimeout(function () {
                    news.parentNode.removeChild(news);
                }, 500);
            }
            news.style.transform = "scale(0.3)";
            news.style.webkitTransform = "scale(0.3)";
        };
        this.init = function () {
            var news = document.createElement("div"),
                content = document.createElement("p"),
                title = document.createElement("p"),
                _this = this;
            news.className = "zwei_prompt";
            news.style.borderColor = this.color;
            content.innerHTML = this.content;
            content.classList.add("zwei_prompt_content");
            news.appendChild(content);
            title.innerHTML = this.title;
            title.classList.add("zwei_prompt_title");
            news.insertBefore(title, content);
            this.allnews.appendChild(news);


            news.onclick = function () {
                _this.showEnd(news);
                news.onclick = null;
                _this.clickpass = true;

            };
            setTimeout(function () {
                _this.showEnd(news);
            }, this.interval * 1000);
        };
        this.init();
    };

还有就是css代码:

样式很简单,想怎么改都行

.zwei_prompt {
    position: relative;
    top: 0;
    width: 370px;
    border: 1px black solid;
    margin: 10px 0;
    transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    cursor: pointer;
    border-radius: 10px;
    border: 2px black solid;
}
.zwei_prompt_title:before, .zwei_prompt_title:after{
    content: " ——————— ";
}

.zwei_prompt_content,.zwei_prompt_title {
    text-align: center;
    word-wrap: break-word;
}

.zwei_prompt_content {
    margin: 20px 7px;
}

至于有些人问zwei是啥...那是我自己的JavaScript库,以后等成熟了也贴出来给大家看看.

PS:zwei是德语里的2

贴上几张图:

消息通知框(JavaScript+css3)

标签：style   http   color   os   java   io   for   ar   2014   

原文地址：http://my.oschina.net/l3ve/blog/306666