Home > Developer > Web Develop
Reprint Please specify source: http://www.cnblogs.com/zhangmingze/p/4816865.html
1, first look at the effect of it, has the effect of power:
2. HTML structure:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8" />5 <title>Mimic the results of Weibo publishing</title>6 <Linkrel= "stylesheet"href= "Css/index.css" />7 </Head>8 <Body>9 <DivID= "Container">Ten <formAction=""> One <Pclass= "Name-text"> A <label>User:<inputtype= "text"ID= "username" /></label> - </P> - <textareaID= "Content"></textarea> the <Pclass= "Tip"> - <spanclass= "Left-tip"ID= "Warn">You can also enter<spanID= "num">140</span>A word</span> - <ahref= "javascript:void (0);"ID= "Submit">Release</a> - </P> + </form> - <ulID= "List"></ul> + </Div> A <Scriptsrc= "Js/tween.js"></Script> at <Scriptsrc= "Js/app.js"></Script> - </Body> - </HTML>
2, CSS style This is not affixed, look at the picture knock effect, will not be able to find me to source
3, the JS part is not complex, the most important is to understand the movement process, the movement process every movement can use this method of thinking, who use who know
1 varSBTN = document.getElementById (' Submit ');2 varUsername = document.getElementById (' username '));3 varContent = document.getElementById (' content ');4 varList = document.getElementById (' list ');5 varnum = document.getElementById (' num ');7 8sbtn.onclick=function(){9 if(Username.value &&content.value) {Ten //Create an Li node One varLi = document.createelement (' li '); A //originally to use createelement, in order to save trouble, directly with innerHTML -li.innerhtml = ' <div class= ' head-img ' > ' + -' ' + ' </div> ' + the' <div class= ' user-info ' > ' + ' <p class= ' user-name ' ><span> ' + -Username.value+ ' </span><a href= "javascript:void (0);" id= "del" > Delete </a></p> ' -+ ' <p class= "text" > ' +content.value+ ' </p></div> '; - //Add in Head +List.insertbefore (li,list.children[0]); - //The following is the motion process, step, start, end, use timer + varTimer =NULL; A varEnd =Li.offsetheight; at varStart = 0; - varT=0; - varMaxt=30 -li.style.height = 0;//Initial let Li label height is 0, otherwise the height will initialize, cause flash -Timer = SetInterval (function(){ -t++; in if(t>maxt) { - clearinterval (timer); toLi.style.height = end + ' px '; + } - //linear motion without tween.js the //li.style.height = end/maxt*t + start + ' px '; * //collision effect, using Tween.js animation plugin $Li.style.height = Tween.Bounce.easeOut (t,start,end,maxt) + ' px ';Panax Notoginseng},30); - theUsername.value = Content.value = ""; + A vardel = document.getElementById (' del '); the //Delete Content button +del.onclick=function(){ - varstart = Li.offsetheight;//the initial height $ varend = 0;//The last height is 0, then the node is deleted $ varchange = End-start;//interval Distance - varT=0; - varMaxt=30; the varUptimer =NULL; -Uptimer = SetInterval (function(){Wuyit++; the if(t>=maxt) { - clearinterval (uptimer); WuLi.parentNode.removeChild (LI);//clears the timer and deletes the node when the height is 0 o'clock - } About //Ibid . $ //li.style.height = change/maxt*t + start + ' px '; - //Ibid . -Li.style.height = Tween.Bounce.easeOut (t,start,change,maxt) + ' px '; -},30); A }; + } the Else{ -(!username.value)?Username.focus (): Content.focus (); $ } the }; the //Oninput is HTML5 event, IE8 above thecontent.oninput=function(){ thenum.innerhtml = 140- This. value.length; - }; in //Ie4-ie10,ie proprietary, compatible with IE theContent.onpropertychange=function(e) { the varE = e| |window.event; About if(e.propertyname.tolowercase () = = "Value"){ thenum.innerhtml = 140- This. value.length; the } the};
That's pretty much the case, Tween.js plug-ins are easier to use, just one line of code
Tween.bounce (there are other effects). EaseOut (with Easein,easeinout) (T,START,CHANGE,MAXT) // each step, start position, distance, total step
Tween.js is the Bezier curve, the landlord will only use, not Bezier curve
Tip: Need the source of the reply to find me to take, quite simple, do not put up, the landlord novice just learn.
Native js+tween.js mimic Weibo release effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
