JavaScript Web making special effects with random numbers _ typical effects

Source: Internet
Author: User
Tags define function
The network world is splendid incomparable, the gorgeous page if uses the special effect reasonably, certainly will be enriched many. Here is my summary of the effects:
Bounce text
Want to see the words that can Dance? Come on!
Code: Add 〈script language= "JavaScript" first between 〈head〉 and 〈/head〉
〈!--
function font11 ()
Define function font11 ()
{
document.all.a1.style.fontsize=16+
Math.floor (Math.random () *24); Call the Math.random () function to produce a random number, and then use the Math.floor () function to produce the next number less than or equal to Math.random () *24 to change the size of the text
C1=math.floor (Math.random () *256);
C2=math.floor (Math.random () *256);
C3=math.floor (Math.random () *256);
Document.all.a1.style.color= "RGB" ("+c1+", "+c2+", "+c3+") "; Ditto, change the color of the text (using RGB color palette)
Timer=settimeout (' font11 () ', 200); Call font11 () function once every 200 milliseconds
}
---〉〈/script〉
Then add onload= "font11 () in 〈body〉";
Finally in need place add 〈span id= "A1" Fly 〈/span〉
Features: text color and size can be random changes.
Extension: You can add more than one set of code in a Web page, where Font11 represent different words, Font12, Font13, and so on, and the text can be different for each.
Picture Fade in
Over time, the picture also loops from blur to clear change.
Code: Add 〈script language= "JavaScript" first between 〈head〉 and 〈/head〉
〈!--
mark=0;
function Tupian ()//Create Functions Tupian ()
{
if (photo.filters.alpha.opacity〈10)
When the picture transparency is less than 10 o'clock
mark=1;
if (photo.filters.alpha.opacity〉98)
When the picture transparency is greater than 98 o'clock
Mark=-1;
Step=2*mark;
Photo.filters.alpha.opacity+=step;
Transparency Value Counter Cumulative
SetTimeout (' Tupian () ', 20);
Every 20 milliseconds, the program executes once.
}
---〉〈/script〉
Then add id= "Photo" and style= "Filter:alpha (opacity=0;)" to the picture attributes.
Finally, add 〈script〉〈 to the back of the picture code!--
Tupian ();
---〉〈/script〉
Features: Picture loops fade in and out.
The code in this article is very simple, and I have an explanation of where to explain it.

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.