HTML微博浮动代码,JS实现模仿微博发布效果实例代码

效果：

思路：

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

代码：

*

{

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;

}

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)

}

//------------------------------------------------------------------------------------