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

点击后展开输入框，并隐藏自身
我要做一个类似豆瓣说句话的效果，打开页面，一开始是显示：
点击后铺展输入框，并隐藏自身

点击后展开的效果是：
点击后铺展输入框，并隐藏自身

原来的代码大概是：
<label id="isay-label" for="isay-cont" style="display: none;">分享生活点滴...</label>
<textarea data-minheight="70" tabindex="1" id="isay-cont" rows="1" style="height: 70px;"></textarea>
<textarea data-minheight="70" tabindex="-1" id="isay-cont-clone" name="comment" rows="1" class="abs-out" style="height: 0px;"></textarea></div>
这个如何写javascript ?
------解决思路----------------------
浮动层而已。。

<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容器的内容，
------解决思路----------------------
效果演示：
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>

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

相关推荐