Native JS to achieve special effects message box

This article shares with you a special effect message box implemented with native JS. The effect is as follows:

The implementation code is as follows, you are welcome to copy and paste.

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Native JS to implement special effects message box</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
 
        textarea {
            overflow:auto;
            resize: none;
        }
 
        li {
            list-style: none;
        }
 
        html {
            height: 100%;
        }
 
        body {
            background: #570226;
            height: 100%;
            font: Arial, Helvetica, sans-serif;
        }
 
        h2 {
            font-family: Arial, Helvetica, sans-serif
        }
 
        .wrap {
            width: 740px;
            height: 498px;
            background-color: #a72244;
            border-radius: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -370px;
            margin-top: -249px;
            overflow: hidden;
        }
 
        #head {
            position: absolute;
            left: 50px;
            top: 20px;
            font-size: 20px;
            color: #fff;
            line-height: 28px;
            text-shadow: 2px 2px 0 #a72244;
        }
 
        #head .title {
            position: absolute;
            width: 340px;
            top: -100px;
        }
 
        #head .url {
            font-size: 14px;
            position: absolute;
            top: 28px;
            opacity: 0;
            filter:alpha(opacity=0);
            left: 700px;
            width: 340px;
        }
 
        #list {
            position: absolute;
            left: 164px;
            top: -100px;
        }
 
        #list li {
            position: absolute;
            top: 0;
            left: 0;
        }
 
        .list-left {
            width: 80px;
            height: 80px;
            background-color: red;
            border-radius: 40px;
            position: relative;
            text-align: center;
            line-height: 80px;
            font-size: 20px;
            color: #f8f8f8;
            z-index: 5;
        }
 
        .text {
            width: 0;
            height: 0;
            border: 1px solid #4C4042;
            line-height: 26px;
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
            color: #000;
            position: absolute;
            left: 30px;
            top: 20px;
            z-index: 2;
            border-radius: 19px;
            outline: none;
        }
 
 
        #btn {
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 40px;
            position: absolute;
            text-align: center;
            font-size: 12px;
            color: #fff;
            padding: 15px;
            line-height: 20px;
            text-decoration: none;
            z-index: 20;
            left: 335px;
            top: -240px;
        }
    </style>
    <script src="js/public.js"></script>
    <script>
        window.onload = function () {
            toHead();
        };
        // Joyful message box text effects, very classic function toHead() {
            var oHead = id("head");
            var oUrl = oHead.children[1];
            var oTitle = oHead.children[0]
            var aTitle = oTitle.innerHTML.split("");
            var iNow = 0;
            var oTimer = null;
            var i = 0;
            // Split "Happy Message Box" for (i = 0; i < aTitle.length; i++) {
                aTitle[i] = "<span>" + aTitle[i] + "</span>";
            }
            oTitle.innerHTML = aTitle.join("");
            aTitle = oTitle.children;
            for (i = 0; i < aTitle.length; i++) {
                aTitle[i].style.left = aTitle[i].offsetLeft + "px";
                aTitle[i].style.top = aTitle[i].offsetTop + "px";
            }
            for (i = 0; i < aTitle.length; i++) {
                aTitle[i].style.position = "absolute";
            }
            oTimer = setInterval(
                function () {
                    if (iNow == aTitle.length) {
                        clearInterval(oTimer);
                        // www.baidu.com sportsstarMove(oUrl, { left: 0, opacity: 100 }, 0, function () {
                            // Title QQ Content Dear, please complete this and start exercising toList();
                        });
                    } else {
                        // Happy message movement starMove(aTitle[iNow], { top: 100 }, 1);
                        iNow++;
                    }
                },
                50);
        };
 
        function toList() {
            var oList = id("list");
            var oBtn = id("btn");
            var aLi = oList.getElementsByTagName("li");
            var aText = getClass('text', oList);
            var aStyle = [
                {
                    height: 26,
                    width: 246,
                    paddingBottom: 5,
                    paddingTop: 5,
                    paddingLeft: 50,
                    paddingRight: 50
                },
                {
                    height: 26,
                    width: 246,
                    paddingBottom: 5,
                    paddingTop: 5,
                    paddingLeft: 50,
                    paddingRight: 50
                },
                {
                    height: 140,
                    width: 246,
                    paddingBottom: 5,
                    paddingTop: 5,
                    paddingLeft: 50,
                    paddingRight: 50
                }
            ];
            var i = 0;
            for (i = 0; i < aLi.length; i++) {
                aLi[i].style.zIndex = aLi.length - i;
            }
            starMove(oList, { top: 94 }, 1, function () {
                starMove(aText[0], aStyle[0], 1);
                starMove(aLi[2], { top: 85 }, 1);
                starMove(aLi[1], { top: 85 }, 1, function () {
                    starMove(aText[1], aStyle[1], 1);
                    starMove(aLi[2], { top: 170 }, 1, function () {
                        starMove(aText[2], aStyle[2], 1, function () {
                            starMove(oBtn, { top: 0 }, 1);
                        });
                    });
                });
            });
        };
    </script>
</head>
 
<body>
    <div class="wrap">
        <form method="get" id="form">
            <h2 id="head">
                <strong class="title">Happy message box</strong>
                <span class="url">www.baidu.com</span>
            </h2>
            <div id="list">
                <ul>
                    <li>
                        <h3 class="list-left">Title</h3>
                        <input type="text" value="" class="text" name="title" disabled="disabled" />
                    </li>
                    <li>
                        <h3 class="list-left">QQ</h3>
                        <input type="text" value="" class="text" name="QQ" disabled="disabled" />
                    </li>
                    <li>
                        <h3 class="list-left">Content</h3>
                        <textarea class="text text1" name="content" disabled="disabled"></textarea>
                    </li>
                </ul>
                <a href="javascript:;" id="btn">Dear, please <br />complete this</a>
            </div>
        </form>
    </div>
</body>
 
</html>

The following is the most important public.js code introduced above, which encapsulates many useful methods.

function id(id) {
    return document.getElementById(id);
}
function toBrowser() {
    var browser = navigator.appName;
    var b_version = navigator.appVersion;
    if (browser == "Netscape") {
        return true;
    }
    var version = b_version.split(";");
    var trim_Version = version[1].replace(/[ ]/g, "");
 
    if (browser == "Microsoft Internet Explorer" && (trim_Version == "MSIE7.0" || trim_Version == "MSIE6.0" || trim_Version == "MSIE8.0")) {
        return false;
    }
    else {
        return true;
    }
}
function starMove(obj, target, iType, fnEnd, iDate) {
    if (obj.timer) {
        clearInterval(obj.timer);
    }
    if (iType == 1) {
        var sAttr = "";
        obj.iSpeed = {};
        for (sAttr in target) {
            obj.iSpeed[sAttr] = 0;
        }
    }
    if (target["transform"]) {
        if (obj["transform"]) {
            target["transform"] += obj["transform"];
        }
        else {
            css(obj, sAttr, 0);
        }
    }
    switch (iType) {
        case 0:
            obj.timer = setInterval(function () { doMoveBuffer(obj, target, fnEnd); }, 24);
            break;
        case 1:
            obj.timer = setInterval(function () { domoveFlexible(obj, target, fnEnd); }, 24);
            break;
    }
}
function doMoveBuffer(obj, target, fnEnd) {
    var sAttr = "";
    var iEnd = 1;
    for (sAttr in target) {
        if (toBrowser() == false && target["transform"]) {
            continue;
        }
        var iNow = parseFloat(css(obj, sAttr));
        if (iNow == target[sAttr]) {
            continue;
        }
        else {
            var iSpeed = (target[sAttr] - iNow) / 5;
            iSpeed *= 0.75;
            if (iSpeed > 0) {
                iSpeed = Math.ceil(iSpeed);
            }
            else {
                iSpeed = Math.floor(iSpeed);
            }
            css(obj, sAttr, iNow += iSpeed);
            iEnd = 0;
        }
    }
    if (iEnd) {
        clearInterval(obj.timer);
        if (fnEnd) {
            fnEnd.call(obj);
        }
    }
}
 
function domoveFlexible(obj, target, fnEnd) {
    var sAttr = "";
    var iEnd = 1;
 
    for (sAttr in target) {
        if (toBrowser() == false && target["transform"]) {
            continue;
        }
        var iNow = parseFloat(css(obj, sAttr));
        obj.iSpeed[sAttr] += (target[sAttr] - iNow) / 5;
        obj.iSpeed[sAttr] *= 0.75;
        if (Math.round(iNow) == target[sAttr] && Math.abs(obj.iSpeed[sAttr]) < 1) {
            continue;
        }
        else {
            iNow = Math.round(iNow + obj.iSpeed[sAttr]);
            css(obj, sAttr, iNow);
            iEnd = 0;
        }
    }
    if (iEnd) {
        clearInterval(obj.timer);
        if (fnEnd) {
            fnEnd.call(obj);
        }
    }
}
function css(obj, attr, value) {
    if (arguments.length == 2) {
        if (attr == "transform") {
            return obj.transform;
        }
        var i = parseFloat(obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr]);
        var val = i ? i : 0;
        if (attr == "opacity") {
            val *= 100;
        }
        return val;
    }
    else if (arguments.length == 3) {
        switch (attr) {
            case 'width':
            case 'height':
            case 'paddingLeft':
            case 'paddingTop':
            case 'paddingRight':
            case 'paddingBottom':
                value = Math.max(value, 0);
            case 'left':
            case 'top':
            case 'marginLeft':
            case 'marginTop':
            case 'marginRight':
            case 'marginBottom':
                obj.style[attr] = value + 'px';
                break;
            case 'opacity':
                if (value < 0) {
                    value = 0;
                }
                obj.style.filter = "alpha(opacity:" + value + ")";
 
                obj.style.opacity = value / 100;
                break;
            case 'transform':
                obj.transform = value;
                obj.style["transform"] = "rotate(" + value + "deg)";
                obj.style["MsTransform"] = "rotate(" + value + "deg)";
                obj.style["MozTransform"] = "rotate(" + value + "deg)";
                obj.style["WebkitTransform"] = "rotate(" + value + "deg)";
                obj.style["OTransform"] = "rotate(" + value + "deg)";
                break;
            default:
                obj.style[attr] = value;
        }
 
        return function (attr_in, value_in) { css(obj, attr_in, value_in) };
    }
}
function getClass(sClass, obj) {
    var aRr = [];
    if (obj) {
        var aTag = obj.getElementsByTagName('*');
    }
    else {
        var aTag = document.getElementsByTagName('*');
    }
    for (var i = 0; i < aTag.length; i++) {
        var aClass = aTag[i].className.split(" ");
        for (var j = 0; j < aClass.length; j++) {
            if (aClass[j] == sClass) {
                aRr.push(aTag[i]);
            }
        }
    }
    return aRr;
}
function byClient(obj, attr) {
    if (attr == "width") {
        return css(obj, "borderLeft") + css(obj, "borderRight") + css(obj, "paddingLeft") + css(obj, "paddingWidth") + css(obj, "paddingWidth");
    }
    else if (attr == "height") {
        return css(obj, "borderTop") + css(obj, "borderBottom") + css(obj, "paddingTop") + css(obj, "paddingBottom") + css(obj, "paddingHeight");
    }
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS realizes message board function
How to use DOM operations to implement a simple message board in js
jsp message board source code three: for jsp beginners.
JS+CSS simulates a message board instance that can display content without refreshing
JS realizes the message board function [floor effect display]
Foldable message board implemented by js (with source code download)
jsp message board source code 2: for jsp beginners.
My ajax message board source code good application js
Code example of writing a message board using ReactJS and Python's Flask framework
jsp message board source code 1: for jsp beginners.

<<: How to quickly repair corrupted MySQL database files using the myisamchk and mysqlcheck tools

>>: How to implement web stress testing through Apache Bench