/
实时动态.html
133 lines (121 loc) · 2.37 KB
/
实时动态.html
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!Doctype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
}
#div1 div{
list-style: none;
border-bottom: 1px dashed #999;
padding: 5px;
overflow: hidden;
filter:alpha(opacity:0);
opacity: 0;
}
</style>
</head>
<body>
<textarea name="" id="txt1" cols="40" rows="10"></textarea>
<input id="btn1" type="button" value="发布">
<div id="div1">
<div></div>
</div>
</body>
<script>
window.onload = function (){
var oTxt1 =document.getElementById('txt1');
var oBtn1 =document.getElementById('btn1');
var oDiv1 =document.getElementById('div1');
oBtn1.onclick = function()
{
var oDiv2 = document.createElement('div');
var aLi = oDiv1.getElementsByTagName('div');
oDiv2.innerHTML = oTxt1.value;
oTxt1.value = '';
if(aLi.length)
{
oDiv1.insertBefore(oDiv2,aLi[0]);
}
else
{
oDiv1.appendChild(oDiv2);
}
// oDiv1.appendChild(oDiv2);
var iHeight=oDiv2.offsetHeight;
oDiv2.style.height = 0;
startMove(oDiv2,{height:iHeight},function(){
startMove(oDiv2,{opacity:100});
});
}
}
/**
@tong biao 完美运动框架 ||任意值变化移动框架
**/
function startMove(obj,json,fn)/*运动框架主函数*/
{
clearInterval(obj.timer);
obj.timer = setInterval(function()
{
var bStop = true;//假设本次运动结束 所有数值到达预期
for(var attr in json)
{
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
//测算速度 获取速度 = (目标点 - 当前位置)/x
var iSpeed = (json[attr] - iCur)/8;
iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//检测停止
if(iCur != json[attr])
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+' )';/*字符串链接 有优先级*/
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr] = iCur + iSpeed +'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
},50)
}
function getStyle(obj, attr)/*获取对象 属性值*/
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
</script>
</html>