<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>仿新浪微博消息发布功能</
title
>
<
style
>
*{margin: 0; padding: 0;}
#div1{width: 400px; height: 400px; border: 1px solid; margin:10px auto; position: relative;overflow: hidden;}
#ul1 li{border-bottom: 1px #999 dashed; padding: 4px; list-style: none;filter: alpha(opacity:0);
opacity: 0;}
</
style
>
<
script
src
=
"js/chuan.js"
></
script
>
</
head
>
<
body
>
<
textarea
rows
=
"5"
cols
=
"30"
id
=
"txt1"
value
=
""
></
textarea
>
<
input
type
=
"button"
id
=
"btn1"
value
=
"发布"
/>
<
div
id
=
"div1"
>
<
ul
id
=
"ul1"
></
ul
>
</
div
>
<
script
>
var oUl=document.getElementById('ul1');
var oTxt1=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
var oLi=document.createElement('li');
oLi.innerHTML=oTxt1.value;
oTxt1.value='';
if(oUl.children.length>0)
{
oUl.insertBefore(oLi,oUl.children[0]);
}
else
{
oUl.appendChild(oLi);
}
var iHeight=oLi.offsetHeight;
oLi.style.height=0;
move(oLi,{height:iHeight},function()
{
move(oLi,{opacity:100});
});
}
</
script
>
</
body
>
</
html
>
chuan,js为之前写的完美运动框架：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
function
getstyle(obj,name)
{
if
(obj.currentStyle)
{
return
obj.currentStyle;
}
else
{
return
getComputedStyle(obj,
false
)[name];
}
}
function
move(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(
function
()
{
var
bBox=
true
;
//假设所有值都已经到了
for
(
var
strr
in
json)
{
if
(strr==
'opacity'
)
{
var
cur=Math.round(parseFloat(getstyle(obj,strr))*100);
}
else
{
var
cur=parseInt(getstyle(obj,strr));
}
var
speed=(json[strr]-cur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if
(cur!=json[strr])
bBox=
false
;
if
(strr==
'opacity'
)
{
obj.style.filter=
'alpha(opacity:'
+(cur+speed+
')'
);
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[strr]=cur+speed+
'px'
;
}
}
if
(bBox)
{
clearInterval(obj.timer);
if
(fnEnd)fnEnd();
}
},30);
};
