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

效果

思路：利用多功能浮动运动框架实现微博效果，首先，将文本区域中的属性添加到新创建的里里面然后，再将里添加到保险商实验所里面，再利用浮动运动框架将数据动态的显示出来。代码：复制代码代码如下： head runat=' server ' title/title style type=' text/CSS ' * { margin : 0；padd : 0；} # ul1 { width : 300 pxhirte : 300 pxborder : 1px纯黑；余量： 10px自动；飞越：隐藏；} # ul1李{列表式：无；padding: 4px边框-bottom: 1px #999虚线；飞越：隐藏；opa城市3360 0；}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var BTN=document。getelementbyid(' BTN ')；var txt=文档。getelementbyid(' t1 ')；var OUl=文档。getelementbyid(' ul1 ')；BTN。onclick=function(){ var CLi=document。创建元素(“李”)；命令行界面。innerhtml=txt。价值；//将数据添加到里里面txt . value=if(OUl . children . length 0){//判断是否已经有李，如果有那么就插入，如果没有那么就新建oUl.insertBefore(cLi，oUl。children[0])；} else { OUl。append child(CLi)；} var ihaThEr=CLi。偏右；//获得里的高度命令行界面。风格。高度=' 0 '；move(cLi，{ height: iHeight }，function () { //然后利用浮动运动将数据显示出来move(cLi，{ opa city 3360 100 })；});} } //- //获取非行间样式函数getStyle(ojb，name){ if(ojb。currentstyle){ return ojb。current style[name]；} else { return getComputedStyle(ojb，false)[name]；} } //缓冲运动json的应用//json{attr，finsh} //json{width:200，height:200}函数move(obj，json，fnName) { //obj是对象，Json是对象的属性，fnName是函数clearInterval(obj。计时器)；//关闭之前的计时器物体。timer=setInterval(function(){ var timeStop=true；//记录属性是否都已经执行完成for(JSON中的var attr){//遍历json中的数据var oGetStyle=0；if (attr=='不透明度'){ //判断透明度oGetStyle=数学。round(parseFloat(getStyle(obj，attr))* 100)；//透明度取整，然后转换完后赋值} else { oGetStyle=parsent(getStyle(obj，attr))；} var speed=(JSON[attr]-oGetStyle)/5；//求速度速度=速度0?数学天花板（速度):数学地板（速度);//进位取整if (oGetStyle！=JSON[attr])timeStop=false；if (attr=='不透明度'){ //透明度物体。风格。filter=' alpha(opa city 3360 '(oGetStyle speed)')'；//给透明度赋值物体。风格。不透明度=(oGetStyle速度)/100；} else { obj。style[attr]=oGetStyle速度' px '；//移动div } } if (timeStop) { //如果所有属性都已经执行完成，那么就关闭计时器clearInterval(obj。计时器)；if (fnName) { //当关闭计时器后要执行的函数fnName()；} } }，30)}//////脚本/头体textarea id=' t1 '/textarea输入类型='button' id='btn' value='发布/ul id=' ul1 ' Li style=' display : none；/Li/ul/正文