Effect:
Idea:
Use the multifunctional floating motion frame to achieve the Weibo effect. First, add the attributes in the textarea to the newly created li, then add the li to the ul, and then use the floating motion frame to dynamically display the data.
Code:
Copy the code code as follows:
<head runat="server">
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#ul1
{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 10px auto;
overflow: hidden;
}
#ul1li
{
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) { //Determine whether there is already li, if so, insert it, if not, create a new one
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 use floating motion to display the data
move(cLi, { opacity: 100 });
});
}
}
//------------------------------------------------ ----------------------------------
//Get the non-interline style
function getStyle(ojb, name) {
if (ojb.currentStyle) {
return ojb.currentStyle[name];
}
else {
return getComputedStyle(ojb, false)[name];
}
}
//Application of buffering motion json
//json{attr,finsh}
//json{width:200,height:200}
function move(obj, json, fnName) { //obj is the object, Json is the attribute of the object, fnName is the function
clearInterval(obj.timer); //Close the previous timer
obj.timer = setInterval(function () {
var timeStop = true; //Record whether all attributes have been executed
for (var attr in json) { //Traverse the data in json
var oGetStyle = 0;
if (attr == 'opacity') { //Judge transparency
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //Transparency is rounded, then assigned after conversion
}
else {
oGetStyle = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - oGetStyle) / 5; //Find speed
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //Carry 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 executed, then close the timer
clearInterval(obj.timer);
if (fnName) { //Function to be executed when the timer is turned off
fnName();
}
}
}, 30)
}
//------------------------------------------------ ----------------------------------
</script>
</head>
<body>
<textarea id="t1"></textarea>
<input type="button" id="btn" value="Publish" />
<ul id="ul1">
<li style="display: none;"></li>
</ul>
</body>