js运动运动效果留言本

浏览数：28 / 时间：2015年06月09日

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#ul1 { margin: 0; position: absolute; right: 10px; top: 8px; width: 700px; height: 500px; border: 1px solid #000; 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 = oLi.offsetHeight;
        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"></ul>
</body>
</html>