您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍了js如何仿新浪微博消息发布功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
具体内容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿新浪微博消息发布功能</title> <style> *{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;} </style> <script src="js/chuan.js"></script> </head> <body> <textarea rows="5" cols="30" id="txt1"value=""></textarea> <input type="button" id="btn1" value="发布" /> <div id="div1"> <ul id="ul1"></ul> </div> <script> 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}); }); } </script> </body> </html>
chuan,js为之前写的完美运动框架:
function getstyle(obj,name) { if(obj.currentStyle) { return obj.currentStyle; } else { return getComputedStyle(obj,false)[name]; } } function move(obj,json,fnEnd) { clearInterval(obj.timer); obj.timer=setInterval(function() { var bBox=true;//假设所有值都已经到了 for(var strr in json) { if(strr=='opacity') { var cur=Math.round(parseFloat(getstyle(obj,strr))*100); } else { var cur=parseInt(getstyle(obj,strr)); } var speed=(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); };
感谢你能够认真阅读完这篇文章,希望小编分享的“js如何仿新浪微博消息发布功能”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。