<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#ul1{
position: absolute;
right: 10px;
top: 8px;
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];
}
}