JS implementation imitate weibo release effect instance code
- 2020-03-30 00:55:22
- OfStack
Effect:
< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201312/20131216165809663.gif" >
Ideas:
The multi-functional floating motion framework is used to achieve the microblog effect. First, the attributes in the textarea are added to the newly created li, then li is added to ul, and then the data is dynamically displayed by the floating motion framework.
Code:
<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;
}
#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) { //Determine if there is already a li, insert if there is, and create if there is not
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 () { //The data is then displayed using a floating motion
move(cLi, { opacity: 100 });
});
}
}
//------------------------------------------------------------------------------------
//Gets the inter - line style
function getStyle(ojb, name) {
if (ojb.currentStyle) {
return ojb.currentStyle[name];
}
else {
return getComputedStyle(ojb, false)[name];
}
}
//Application of buffered motion json
//json{attr,finsh}
//json{width:200,height:200}
function move(obj, json, fnName) { //Obj is an object, Json is an object property, and fnName is a function
clearInterval(obj.timer); //Turn off the previous timer
obj.timer = setInterval(function () {
var timeStop = true; //Record whether all the properties have been executed
for (var attr in json) { //Iterate over the data in json
var oGetStyle = 0;
if (attr == 'opacity') { //Transparency of judgment
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //Transparency round, and then after the conversion assignment
}
else {
oGetStyle = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - oGetStyle) / 5; //O speed
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //Carry integer
if (oGetStyle != json[attr])
timeStop = false;
if (attr == 'opacity') { //transparency
obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')'; // to transparency The assignment
obj.style.opacity = (oGetStyle + speed) / 100;
}
else {
obj.style[attr] = oGetStyle + speed + 'px'; //Mobile div
}
}
if (timeStop) { //If all the properties have been executed, the timer is turned off
clearInterval(obj.timer);
if (fnName) { //The function to execute when the timer is turned off
fnName();
}
}
}, 30)
}
//------------------------------------------------------------------------------------
</script>
</head>
<body>
<textarea id="t1"></textarea>
<input type="button" id="btn" value=" release " />
<ul id="ul1">
<li style="display: none;"></li>
</ul>
</body>