最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js仿新浪微博消息发布功能
时间:2017-04-14 编辑:简简单单 来源:一聚教程网
代码如下 | 复制代码 |
*{margin: 0; padding: 0;} #div1{width: 400px; height: 400px; border: 1px solid; margin:10px auto; position: relative;overflow: hidden;} #ul1 li{border-bottom: 1px #999 dashed; padding: 4px; list-style: none;filter: alpha(opacity:0); opacity: 0;}
var oUl=document.getElementById('ul1'); var oTxt1=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { var oLi=document.createElement('li'); oLi.innerHTML=oTxt1.value; oTxt1.value=''; if(oUl.children.length>0) { oUl.insertBefore(oLi,oUl.children[0]); } else { oUl.appendChild(oLi); } var iHeight=oLi.offsetHeight; oLi.style.height=0; move(oLi,{height:iHeight},function() { move(oLi,{opacity:100}); }); } |
chuan,js为之前写的完美运动框架:
代码如下 | 复制代码 |
functiongetstyle(obj,name) { if(obj.currentStyle) { returnobj.currentStyle; } else { returngetComputedStyle(obj,false)[name]; } } functionmove(obj,json,fnEnd) { clearInterval(obj.timer); obj.timer=setInterval(function() { varbBox=true;//假设所有值都已经到了 for(varstrrinjson) { if(strr=='opacity') { varcur=Math.round(parseFloat(getstyle(obj,strr))*100); } else { varcur=parseInt(getstyle(obj,strr)); } varspeed=(json[strr]-cur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[strr]) bBox=false; if(strr=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed+')'); obj.style.opacity=(cur+speed)/100; } else { obj.style[strr]=cur+speed+'px'; } } if(bBox) { clearInterval(obj.timer); if(fnEnd)fnEnd(); } },30); }; |
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31