js-带运动效果的留言板 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #ul1{
                position: absolute;
                right: 10px;
                top: 8px;
                width: 700px;
                height: 500px;
                border: 1px solid black;
                margin: 0;
                padding: 10px;
                overflow: hidden;
            }
            li{
                line-height: 28px;
                border-bottom: 1px dotted #000;
                list-style: none;
                word-break: break-all;
                overflow: hidden;            
            }
        </style>
        <script src="move.js"></script>
        <script>
            window.onload=function(){
                var oContent=document.getElementById("content");
                var oBtn=document.getElementById("btn");
                var oUl=document.getElementById("ul1");
                
                oBtn.onclick=function(){
                    var oLi=document.createElement("li");
                    oLi.innerHTML=oContent.value;
                    if(oUl.children[0]){
                        oUl.insertBefore(oLi,oUl.children[0]);
                    }else{
                        oUl.appendChild(oLi)
                    }
                    var iHeight=parseInt(css(oLi,"height"));
                    oLi.style.height="0px";
                    oLi.style.opacity="0";
                    oLi.style.filter="alpha(opacity=0)";
                    startMove(oLi,{
                        height:iHeight,
                        opacity:100
                    })
                }
            }
        </script>
    </head>
    <body>
        <textarea id="content" rows="10" cols="50"></textarea>
        <input type="button" value="留言" id="btn" />
        <ul id="ul1">
            <li>111111111111</li>
            <li>111111111111</li>
            <li>111111111111</li>
            <li>111111111111</li>
            <li>111111111111</li>
        </ul>
    </body>
</html>
function startMove(obj, json, fn) {
    clearInterval(obj.iTimer);
    var iCur = 0;
    var iSpeed = 0;
    obj.iTimer = setInterval(function() {

        var iBtn = true;

        for(var attr in json) {
            var iTarget = json[attr];
            if(attr == "opacity") {
                iCur = Math.round(css(obj, "opacity") * 100);
            } else {
                iCur = parseInt(css(obj, attr));
            }

            iSpeed = (iTarget - iCur) / 8;

            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

            if(iCur != iTarget) {
                iBtn = false;
                if(attr == "opacity") {
                    obj.style.opacity = (iCur + iSpeed) / 100;
                    obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
                } else {
                    obj.style[attr] = iCur + iSpeed + 'px';
                }
            }

        }
        if(iBtn) {
            clearInterval(obj.iTimer);
            fn && fn.call(obj);
        }

    }, 30);
}

function css(obj, attr) {
    if(obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

 

posted @ 2019-01-04 14:59  webxy  阅读(99)  评论(0)    收藏  举报