效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来。 代码: 复制代码 代码如下: <BR> *<BR> {<BR> margin: 0;<BR> padding: 0;<BR> }<BR> #ul1<BR> {<BR> width: 300px;<BR> height: 300px;<BR> border: 1px solid black;<BR> margin: 10px auto;<BR> overflow: hidden;<BR> }<BR> #ul1 li<BR> {<BR> list-style: none;<BR> padding: 4px;<BR> border-bottom: 1px #999 dashed;<BR> overflow: hidden;<BR> opacity: 0;<BR> }<BR> <BR> window.onload = function () {<BR> var btn = document.getElementById('btn');<BR> var txt = document.getElementById('t1');<BR> var oUl = document.getElementById('ul1');<BR> btn.onclick = function () {<BR> var cLi = document.createElement('li');<BR> cLi.innerHTML = txt.value; //将数据添加到li里面<BR> txt.value = '';<BR> if (oUl.children.length > 0) { //判断是否已经有li,如果有那么就插入,如果没有那么就新建<BR> oUl.insertBefore(cLi, oUl.children[0]);<BR> } else {<BR> oUl.appendChild(cLi);<BR> }<BR> var iHeight = cLi.offsetHeight; //获得li的高度<BR> cLi.style.height = '0';<BR> move(cLi, { height: iHeight }, function () { //然后利用浮动运动将数据显示出来<BR> move(cLi, { opacity: 100 });<BR> });<BR> }<BR> }<BR> //------------------------------------------------------------------------------------<BR> //获取非行间样式<BR> function getStyle(ojb, name) {<BR> if (ojb.currentStyle) {<BR> return ojb.currentStyle[name];<BR> }<BR> else {<BR> return getComputedStyle(ojb, false)[name];<BR> }<BR> }<BR> //缓冲运动json的应用<BR> //json{attr,finsh}<BR> //json{width:200,height:200}<BR> function move(obj, json, fnName) { //obj是对象,Json是对象的属性, fnName是函数<BR> clearInterval(obj.timer); //关闭之前的计时器<BR> obj.timer = setInterval(function () {<BR> var timeStop = true; //记录属性是否都已经执行完成<BR> for (var attr in json) { //遍历json中的数据<BR> var oGetStyle = 0;<BR> if (attr == 'opacity') { //判断透明度<BR> oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //透明度取整,然后转换完后赋值<BR> }<BR> else {<BR> oGetStyle = parseInt(getStyle(obj, attr));<BR> }<BR> var speed = (json[attr] - oGetStyle) / 5; //求速度<BR> speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整<BR> if (oGetStyle != json[attr])<BR> timeStop = false;<BR> if (attr == 'opacity') { //透明度<BR> obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')'; //给透明度赋值<BR> obj.style.opacity = (oGetStyle + speed) / 100;<BR> }<BR> else {<BR> obj.style[attr] = oGetStyle + speed + 'px'; //移动div<BR> }<BR> }<BR> if (timeStop) { //如果所有属性都已经执行完成,那么就关闭计时器<BR> clearInterval(obj.timer);<BR> if (fnName) { //当关闭计时器后要执行的函数<BR> fnName();<BR> }<BR> }<BR> }, 30)<BR> }<BR> //------------------------------------------------------------------------------------<BR>