Using the multifunctional floating motion frame to realize the microblogging effect, first of all, add the attributes in the textarea to the newly created Li, then add Li to the UL, then use the floating motion frame to display the data dynamically.
<title></title>
<style type= "Text/css" >
*
{
margin:0;
padding:0;
}
#ul1
{
width:300px;
height:300px;
BORDER:1PX solid black;
margin:10px Auto;
Overflow:hidden;
}
#ul1 Li
{
List-style:none;
padding:4px;
border-bottom:1px #999 dashed;
Overflow:hidden;
opacity:0;
}
</style>
<script type= "Text/javascript" >
Window.onload = function () {
var btn = document.getElementById (' btn ');
var txt = document.getElementById (' t1 ');
var Oul = document.getElementById (' ul1 ');
Btn.onclick = function () {
var cLi = document.createelement (' li ');
cli.innerhtml = Txt.value; Add data to Li
Txt.value = ';
if (OUl.children.length > 0) {//Judge if there is already Li, if so insert, if not then new
Oul.insertbefore (CLi, oul.children[0]);
} else {
Oul.appendchild (CLi);
}
var iheight = cli.offsetheight; Get the height of Li
CLi.style.height = ' 0 ';
Move (CLi, {height:iheight}, function () {//Then display the data using floating motion)
Move (CLi, {opacity:100});
});
}
}
//------------------------------------------------------------------------------------
Get non-rows style
function GetStyle (OJB, name) {
if (Ojb.currentstyle) {
return Ojb.currentstyle[name];
}
else {
Return getComputedStyle (OJB, false) [name];
}
}
Application of buffer Motion JSON
Json{attr,finsh}
JSON{WIDTH:200,HEIGHT:200}
function Move (obj, JSON, fnname) {//obj is an object, JSON is an object's property, FnName is a function
Clearinterval (Obj.timer); Close the timer before
Obj.timer = setinterval (function () {
var timestop = true; Whether the logging properties have been completed
for (Var attr in JSON) {//Traversal of data in JSON
var ogetstyle = 0;
if (attr = = ' opacity ') {//Judge transparency
Ogetstyle = Math.Round (parsefloat (GetStyle (obj, attr)) * 100); Transparency rounding, then assigned after conversion
}
else {
Ogetstyle = parseint (GetStyle (obj, attr));
}
var speed = (json[attr]-Ogetstyle)/5; Ask for Speed
Speed = speed > 0? Math.ceil (Speed): Math.floor (speed); Take rounding
if (Ogetstyle!= json[attr])
Timestop = false;
if (attr = = ' opacity ') {//Transparency
Obj.style.filter = ' alpha (opacity: ' + (Ogetstyle + speed) + ') '; Assign a value to transparency
Obj.style.opacity = (Ogetstyle + speed)/100;
}
else {
OBJ.STYLE[ATTR] = Ogetstyle + speed + ' px '; Move Div
}
}
if (timestop) {//If all properties have been completed, turn off the timer
Clearinterval (Obj.timer);
if (fnname) {//function to be executed after the timer is closed
FnName ();
}
}
}, 30)
}
//------------------------------------------------------------------------------------
</script>
<body>
<textarea id= "T1" ></textarea>
<input type= "button" id= "BTN" value= "Publish"/>
<ul id= "UL1" >
<li style= "Display:none;" ></li>
</ul>
</body>
