js仿新浪微博消息發(fā)布功能
本文實(shí)例為大家分享了js仿新浪微博消息發(fā)布的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿新浪微博消息發(fā)布功能</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="發(fā)布" /> <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為之前寫(xiě)的完美運(yùn)動(dòng)框架:
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;//假設(shè)所有值都已經(jīng)到了 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); };
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS實(shí)現(xiàn)模仿微博發(fā)布效果實(shí)例代碼
- PHP+Mysql+jQuery實(shí)現(xiàn)發(fā)布微博程序 jQuery篇
- 基于jquery DOM寫(xiě)的類(lèi)似微博發(fā)布的效果
- JS實(shí)現(xiàn)仿新浪微博發(fā)布內(nèi)容為空時(shí)提示功能代碼
- 使用新浪微博API的OAuth認(rèn)證發(fā)布微博實(shí)例
- PHP+Mysql+jQuery實(shí)現(xiàn)發(fā)布微博程序 php篇
- JavaScript制作頁(yè)面倒計(jì)時(shí)器的實(shí)現(xiàn)
- 基于javascript制作微博發(fā)布欄效果
- 基于jQuery實(shí)現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示
- JavaScript仿微博發(fā)布信息案例
相關(guān)文章
帝國(guó)cms首頁(yè)列表頁(yè)實(shí)現(xiàn)點(diǎn)贊功能
這篇文章主要介紹了帝國(guó)cms首頁(yè)列表頁(yè)實(shí)現(xiàn)點(diǎn)贊功能的相關(guān)資料,需要的朋友可以參考下2017-10-10javascript監(jiān)聽(tīng)鼠標(biāo)滾輪事件淺析
這篇文章主要介紹了javascript監(jiān)聽(tīng)鼠標(biāo)滾輪事件淺析,使用具體例子說(shuō)明,同時(shí)考慮了不同的瀏覽器,需要的朋友可以參考下2014-06-06淺談DOM的操作以及性能優(yōu)化問(wèn)題-重繪重排
下面小編就為大家?guī)?lái)一篇淺談DOM的操作以及性能優(yōu)化問(wèn)題-重繪重排。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01js style.display=block顯示布局錯(cuò)亂問(wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇js style.display=block顯示布局錯(cuò)亂問(wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09JS實(shí)現(xiàn)圖片上傳多次上傳同一張不生效的處理方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片上傳多次上傳同一張不生效的處理方法,處理方法也很簡(jiǎn)單,只要在刪除方法里置空input,具體實(shí)例代碼大家參考下本文2018-08-08Typescript的三種運(yùn)行方式(小結(jié))
這篇文章主要介紹了Typescript的三種運(yùn)行方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09顏色選擇器 Color Picker,IE,Firefox,Opera,Safar
顏色選擇器 Color Picker,需要的朋友可以參考下。2010-11-11基于JavaScript實(shí)現(xiàn)購(gòu)物網(wǎng)站商品放大鏡效果
大家在日常生活中都有網(wǎng)購(gòu)的經(jīng)驗(yàn),有的網(wǎng)站會(huì)有商品放大鏡功能,效果非常棒,那么基于js代碼是如何實(shí)現(xiàn)的呢?下面小編給大家?guī)?lái)了基于js實(shí)現(xiàn)購(gòu)物網(wǎng)站商品放大鏡效果,非常不錯(cuò),感興趣的朋友參考下吧2016-09-09JS判斷是否手機(jī)或pad訪問(wèn)實(shí)現(xiàn)方法
這篇文章主要介紹了JS判斷是否手機(jī)或pad訪問(wèn)實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-12-12