The method of realizing word drop effect in JS

Source: Internet
Author: User
Tags relative

This article describes the method of JS to achieve the effect of text drop. Share to everyone for your reference. The implementation methods are as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "ru" > <head> <title></title> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <script src=" jquery-1.6.2.min.js "type=" Text/javascript "></script> <style type=" Text/css "> canvas{width:500px; height:500px position:relative;} </style> </head> <body> < div> <input type= "button" onclick= "Javascript:falling.init ();" Value= "Go"/> </div> <div class= " Canvas "id=" Canvas "></div> <script type=" Text/javascript "> * * * Fall effect * * Function Falling () {this.dict=[" ABCD "," 2222 "," sign "," Next "," container "," content "," last "," Break "," less "," than "," this "," absolute "," relative "," my "," index "," HTML "," Java "," C # "," Web "," JavaScript "," PHP "," include "," Shit "," Bull "," big "," smart "," call "," Apply "," Callee "," Caller "," function "]; This.canvas=$ ("#canvas"); this.step=15; this.freq=10; this.height=500; this.width=500; This.si=null; } falling.prototype={fallingaction:function (DOM) {var self=this; var freqs=[10,15,20];//the distance of each drop var diss=[];// Records the current distance of all DOM var disperfreqs=[];//per dom var targetdis=500; var domcsstops=[];//all Dom's top attribute var successdom=[];//records which DOM has ended the campaign Var successcount=0;//how many Dom has ended Var total= Dom.length; var freqmarklength=freqs.length; for (Var i=0,j=dom.length;i<j;i++) {domcsstops[i]=dom[i].position (). top; diss[i]=0; disperfreqs[i]=freqs[ parseint (Math.random () *freqmarklength)]; } self.si=setinterval (function () {if (successcount>=total) {clearinterval (self.si);} for (Var i=0,j=dom.length;i <j;i++) {if (typeof (Successdom[i))!= "undefined" && successdom[i]== "OK") {continue;} Diss[i] + = disperfreqs[ I]; if (Diss[i] >= Targetdis) {dom[i].css ("top", Targetdis+domcsstops[i]); successdom[i]= "OK"; successcount++;;} else{dom[i].css ("Top", Diss[i]+domcsstops[i]);} },SELF.FREQ); }, Init:function () {VAR Self=this; Self.canvas.html ("); var dom=[]; var l=0; var t=0; var tempdom=$ ("<div style= ' Position;absolute;left:-100000;visibility:hidden ' ></div>"). Appendto ($ (" Body ")); for (Var i=0,j=self.dict.length;i<j;i++) {dom[i]=$ ("<span style= ' Position:absolute ' >" +self.dict[i]+ "</ Span> "). Appendto (Tempdom); var domwidth=dom[i].width (); var domheight=dom[i].height (); if (t<self.height) {if (l<self.width) {if (domwidth+l<=self.width) {dom[i].css ({"Top": T, "Left": l}); Self.canvas.append (Dom[i]); L + + dom[i].width (); }else{if (domheight+t<=self.height) {t=t+domheight; Dom[i].css ({"Top": T, "Left": 0}); Self.canvas.append (dom[i)); L = dom[i].width (); }else{break;//to limit}}else{if (domheight+t<=self.height) {t=t+domheight; l=0; Dom[i].css ({"Top": T, "Left": l}); Self.canvas.append (Dom[i]); }else{break;//to limit}}}//else limit}/* for (Var i=0,l=self.dict.length;i<l;i++) {self.fallingaction (dom[i)); Allingaction (DOM); } var falling=new falling (); Falling. Init (); </script> </body> </html>

I hope this article will help you with your JavaScript programming.

Note < > : More Wonderful tutorials please focus on Triple programming

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.