jquery makes a Christmas theme page more like a Love album _jquery

Today is the snow effect of the Christmas theme page, personal gray often like.

First, put a picture of the effect:

When we see this page, we should pay attention to four points:
1. Carousel of pictures
2. Scrolling effect of text
3. Music Playback
4. Snow effect

Let's finish it at 1.1 o ' go,go!.
For the last time I shared someone said I was not careful enough, then I will be more careful in this article.
(1) Preparatory work
First create new Css,img,js,file these four folders and new Demo.css, Carousel Pictures, Demo.js, a song in the corresponding folder, new demo.html, and add the following code in the DEMO.CSS:

*{
 padding:0;
 margin:0;
}
body{
 background: #000;
 Overflow:hidden;
}

This code is mainly to eliminate the default style, and set the background color to black, overflow hidden.
The introduction of Demo.css,jquery.js in demo.html (online search can be), demo.js.

2) The production of the Carousel map

<div id= "Sdimage" >
 <div class= "sdimg" ></div>
 <div class= "sdimg" ></div>
 <div class= "sdimg" ></div>
 <div class=" sdimg "></div>
 <div class= "sdimg" ></div>
 <div class= "sdimg" ></div>
</div>

With a large div wrapped all the carousel map, Small div wrap img Used for positioning, carousel and other operations

#sdimage {
 position:absolute;
 Margin:auto 0;
 left:100px;
 top:100px;;
}
. sdimg{
 Display:none;
 Position:absolute;
}

#sdimage主要是为了定位轮播图的位置,. Sdimg is to hide the pictures and make all the pictures overlap.

The following is the idea of the JS of the next-round broadcast map:
1. Show First picture
2. Set the timer so that the picture appears hidden in turn
3. Add animation effect, make not blunt (FadeIn () and fadeout () is fade effect)

$ (function () {
var i = 0;
 $ (". Sdimg"). EQ (0). Show (). siblings (). Hide ();
 SetInterval (function () {
  i++;
  if (i>5) {
   i=0;
  }
  $ (". Sdimg"). EQ (i). FadeIn (). Siblings (). Fadeout ();
 },3000);
});

3 Text scrolling effect

<div id= "sdmsg" >
 <marquee direction= "Up" scrollamount= "4" >
   Shayannara-gift to Japanese girl <br>-
   -Xu Zhimo <br>
   Most is the gentle,<br>
   like a water lotus <br>
   The cool breeze of the charming,<br>
   way a treasure, the way a treasure,<br>
   There is honey sorrow--<br> Shayannara in that treasure
   !
 </marquee>
</div>

Amount of ... This suddenly don't know how to say, explain marquee bar.
Marquee is the HTML label, in which the content can be scrolled, direction set the direction of text scrolling, ScrollAmount set text scrolling speed.

#sdmsg {
 position:absolute;
 width:400px;
 height:500px;
 Color: #FFF;
 top:100px;
 left:650px;
 line-height:40px;
}

Set the display position for the text, such as long width. Text scrolling is done as simple as this.

4) Music Playback
<div><audio src= "File/baihu.mp3" Controls ></audio></div>
Hey, one line of code is done. Controls is to display the control, play buttons, etc., this is a luster, there is no mood, of course, you can also set the control to AutoPlay let it play and hide, this effect is also a bang bang.

5) Snow effect production
The play is finally here!
First of all, the idea of the specific code in the annotation explained OH:
1. We need snowflakes to fall randomly from top to bottom of the screen, so we set it to a height of 50. (Why here is-50, because set the size of snowflakes in 20-50, if the top is less than 50 snowflakes larger than 50, the appearance of snowflakes will appear very abrupt, parents can try OH)
2. Here is the distance from the left side of the screen to control the snowflakes from the top of the browser down from different positions.
3. This is where the snowflake ends and the distance from the left side of the browser is different to control the trajectory of his movement. When snowflakes drift down, his trajectory is certainly different, because it can appear inflexible.
4. Snow's trajectory has been, next to consider the fall of the snow time. Consider here that if the screen is scaled to varying degrees, the speed of snowflakes falling is certainly not the same. So we have to control the speed of snowflakes falling through the height of the browser.

var minsize = 20; Snowflake Minimum value var maxsize = 50; Snowflake Max value var flack = $ ("<div></div>"). css ({"position": "Absolute", "Top": " -50px"}). html ("❉"); A snowflake $ (function () {var sdwidth = $ (document). width ();//Browser breadth var sdheight = $ (document). Height ();//Browser Heights Setinterva L (function () {var startwidth = Math.random () *sdwidth;//snowflake start distance random number on left screen var sdimg = minsize + math.random () * (maxsize-min size); Snowflake random size var endwidth = Math.random () *sdwidth; Snowflake End Distance random number on the left of screen var time = sdheight*math.random () + 3000; Snowflakes landed time var startoption = 0.7+0.3*math.random (); Snowflakes start to land transparency var endoption = 0.2 + 0.3*math.random (); Snowflakes end the descent of the Transparency Flack.clone (). Appendto ($ ("body")). CSS ({//clone snowflake Ice Set initial position "left": Startwidth, "font-size": sdimg, "Opac ity ": startoption," color ":" #fff "}). Animate ({//animate, is the way to do animation, where snowflakes fall from top to bottom: sdheight-30," left ": Endwi

 DTH, "opacity": Endoption},time,function () {$ (this). Remove ();//snowflakes fall to the ground to disappear, remove the created snowflakes})},100)});

This set the snowflakes from the top to the drop after the transparency is different.
OK, a beautiful Christmas theme effect page is done, I hope you like.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.