JS实现模仿微博发布效果实例代码

时间：2021-05-26

效果：

思路：

利用多功能浮动运动框架实现微博效果，首先，将textarea中的属性添加到新创建的li里面然后，再将li添加到ul里面，再利用浮动运动框架将数据动态的显示出来。

代码：
复制代码 代码如下:
<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; //将数据添加到li里面
txt.value = '';
if (oUl.children.length > 0) { //判断是否已经有li，如果有那么就插入，如果没有那么就新建
oUl.insertBefore(cLi, oUl.children[0]);
} else {
oUl.appendChild(cLi);
}
var iHeight = cLi.offsetHeight; //获得li的高度
cLi.style.height = '0';
move(cLi, { height: iHeight }, function () { //然后利用浮动运动将数据显示出来
move(cLi, { opacity: 100 });
});
}
}
//------------------------------------------------------------------------------------
//获取非行间样式
function getStyle(ojb, name) {
if (ojb.currentStyle) {
return ojb.currentStyle[name];
}
else {
return getComputedStyle(ojb, false)[name];
}
}
//缓冲运动json的应用
//json{attr,finsh}
//json{width:200,height:200}
function move(obj, json, fnName) { //obj是对象，Json是对象的属性， fnName是函数
clearInterval(obj.timer); //关闭之前的计时器
obj.timer = setInterval(function () {
var timeStop = true; //记录属性是否都已经执行完成
for (var attr in json) { //遍历json中的数据
var oGetStyle = 0;
if (attr == 'opacity') { //判断透明度
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //透明度取整，然后转换完后赋值
}
else {
oGetStyle = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - oGetStyle) / 5; //求速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整
if (oGetStyle != json[attr])
timeStop = false;
if (attr == 'opacity') { //透明度
obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')'; //给透明度赋值
obj.style.opacity = (oGetStyle + speed) / 100;
}
else {
obj.style[attr] = oGetStyle + speed + 'px'; //移动div
}
}
if (timeStop) { //如果所有属性都已经执行完成，那么就关闭计时器
clearInterval(obj.timer);
if (fnName) { //当关闭计时器后要执行的函数
fnName();
}
}
}, 30)
}
//------------------------------------------------------------------------------------
</script>
</head>
<body>
<textarea id="t1"></textarea>
<input type="button" id="btn" value="发布" />
<ul id="ul1">
<li style="display: none;"></li>
</ul>
</body>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章