点击后展开输入框，并隐藏自身

浮动层而已。。<style>
.comment{position:relative;width:600px}
.comment textarea{width:100%;height:30px}
.comment .share{position:absolute;top:10px;left:10px}
.comment .photo{position:absolute;top:10px;right:10px}
.comment .photo span{float:left;padding-left:20px;background:url(照相的背景图片);margin-left:10px}
.comment .photo span.huanti{background-image:url(话题的背景图片);}
</style>
<a href="">说句话</a>
<div class="comment">
<label id="isay" for="isay-cont" class="share">分享生活点滴...</label>
<label id="iphoto" for=" class="photo"><span></span><span class="huati"></span></label>
 <textarea data-minheight="70" tabindex="1" id="isay-cont" rows="1"></textarea>
</div>点击事件就不用写了吧。。设置下textarea的高度和照片label的left/top和增加里面span容器的内容，

解决方案 »

  1.   

    效果演示：
    http://jsbin.com/vakuni/1/edit<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>
            *{ margin:0; padding:0;}
            .comment{position:relative;width:600px}
            .comment textarea{width:100%;height:100px;border:0;background: #fff;}
            .comment .share{position:absolute;top:10px;left:10px}
            .comment .photo{position:absolute;top:10px;right:10px}
            .comment .photo span{float:left;padding-left:20px;background:url(照相的背景图片);margin-left:10px}
            .comment .photo span.huanti{background-image:url(话题的背景图片);}
            .main{ height:30px; overflow:hidden; border:1px solid #ccc;}
            .bot{background: #f1f1f1; border-top:1px solid #ccc; height:70px;}
            .add{ padding-left:2em; line-height:50px;}
        </style>
    </head>
    <body>
    <a href="">说句话</a>
    <div class="comment">
        <label id="isay" for="isay-cont" class="share">分享生活点滴...</label>
        <label id="iphoto" for="" class="photo"><span></span><span class="huati"></span></label>
        <div class="main" id="main">
            <textarea data-minheight="30" tabindex="1" class="txt" id="isay-cont" rows="1"></textarea>
            <div class="bot"><div class="add">添加网页工具</div></div>
        </div>
    </div>
    <script>
        var main = document.getElementById('main');
        var txt = document.getElementById('isay-cont');
        txt.onfocus = function(){
            act(main, 'height', 150);
        }
        txt.onblur = function(){
            act(main, 'height', getElData(txt, 'minheight'))
        }
        function css(obj, attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
        function getElData(obj, attr){
            return obj.getAttribute('data-' + attr);
        }
        function act(obj, attr, target){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var stop = true;
                var cur = parseInt(css(obj, 'height'));
                var speed = (target - cur) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if(cur != target){
                    stop = false;
                    obj.style.height = cur + speed + 'px';
                }
                if(stop){
                    clearInterval(obj.timer);
                    obj.timer = null;
                }
            }, 30);
        }
    </script>
    </body>
    </html>