js 仿微博说说

最新推荐文章于 2022-08-08 14:24:57 发布

编程之上

最新推荐文章于 2022-08-08 14:24:57 发布

阅读量1.1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/ruizhengyun/article/details/37997683

版权

javascript 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>留言</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
    *{margin:0; padding:0;}
    ul,li{margin-right: 0; padding:0;}
    li{list-style:none;}
    .claerfix:before,.claerfix:after{display:table; content: '';}
    .claerfix:after{clear:both;}
    .claerfix{zoom:1;}
    #wp{width:800px; margin:40px auto;}
    #message-input{
        border:1px solid #ddd;
        line-height:24px;
        height:100px;
        width: 100%;
        resize:none; 
    }
    #publish{
        border:0 none;
        background-color: #ddd;
        padding:4px 20px;
        line-height: 24px;
        margin: 10px 0 20px;
        float: right;
        cursor:pointer;
    }
    #message-record{
        border:1px solid #ddd;
        height:400px; overflow:hidden;
        width: 100%;
    }
    #message-record div{
        overflow: hidden;
        word-break:break-all;
        line-height: 28px;
        border-bottom:1px dotted #ddd;
    }
</style>
</head>
<body>
    <div id="wp">
        <textarea id="message-input"></textarea>
        <div class="clearfix"><input type="button" id="publish" value="发表"></div>
        <div id="message-record"></div>
    </div>
<script>
    function css(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}

function startMove(obj,json,fn){
    clearInterval(obj.iTimer);
    var iCur = 0;
    var iSpeed= 0;

    obj.iTimer = setInterval(function(){
        //定义开关，以判断json中所有属性都达到目标
        var flag = true;    
        
        // 多个属性的时候，用json形式
        for(var attr in json){
            // 目标值可通过json键/值对表示
            var iTarget = json[attr];
            // 属性判别
            if(attr == 'opacity'){
                // 小数的不可靠性
                iCur = Math.round(css(obj,'opacity')*100);
            }else{
                iCur = parseInt(css(obj,attr));
            }

            // 定义速度
            var iSpeed = (iTarget - iCur)/8;
            // 速度正负数向上/向下取整
            iSpeed = iSpeed >0?Math.ceil(iSpeed):Math.floor(iSpeed);

            // 当前值没有达到目标，则flag永远为false,从而定时器不会关掉，后续到达的属性值继续运动
            if(iCur != iTarget){
                flag = false;
                if(attr == 'opacity'){
                    obj.style.opacity = (iCur + iSpeed)/100;
                    obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
                }else{
                    obj.style[attr] = iSpeed + iCur + 'px';
                }
            }
        }

        // 当json中所有属性值都实现时，则清除当前定时器
        if(flag){
            clearInterval(obj.iTimer);
            fn && fn.call(obj);
        }
    },30);
}
</script>
<script>
    window.onload = function(){
        var mInput = document.getElementById('message-input');
        var oRecord = document.getElementById('message-record');
        var oBtn = document.getElementById('publish');

        oBtn.onclick = function(){
            var oDiv = document.createElement('div');
            oDiv.innerHTML = mInput.value;

            if(oRecord.children[0]){
                oRecord.insertBefore(oDiv,oRecord.children[0]);
            }else{
                oRecord.appendChild(oDiv);
            }

            var iH = parseInt(css(oDiv,'height'));
            oDiv.style.opacity = '0';
            oDiv.style.filter = 'alpha(alpha = 0)';
            oDiv.style.height ='0';

            startMove(oDiv,{
                height:iH,
                opacity:100
            });
        }
    }
</script>
</body>
</html>

编程之上

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 仿微博说说

说说 *{margin:0; padding:0;} .f-wrap{width:500px; margin:10px auto;} body{font:normal normal 14px/20px "microsoft yahei",arial,sans-serif;} #txt{border:1px solid #ddd; line-height: 24px; resize:
复制链接

扫一扫

专栏目录