Jquery animation-7. The background will be moved to explain the principle of Div + CSS Animation

Today's course introduces the background of mobile. By the way, we will explain the principle of Div + CSS animation. First, we will introduce how to make the background Effects of moving.

HtmlCodeIt is relatively simple. I will post it all. I will introduce the implementation of JS later.

 <!  Doctype html  >  <  Html  >  <  Head  >      <  Title  > </  Title  >     <  Style  Type  = "Text/CSS"  >  Header  {  Display  :  Block  ;  Width  : 660px  ;  Height  :  Pixel PX  ;  Margin  :  Auto  ;  Background :  URL (img/header.jpg) Repeat 0 0  ;          }      </  Style  >  </  Head  >  <  Body  >      <  Header >      </  Header  >  </  Body  >  </  Html  > 

The page contains a header tag, which sets the CSS effect and specifies the offset of the CSS background image and image. Next, we need to modify the background offset to implement background movement. Here we will use the CSS background-position attribute. You can go to http://www.w3school.com.cn/css/pr_background-position.asp to find the relevant information.

We can see that the above CSS definesBackground: URL (img/header.jpg) Repeat0 0;0 0 is the positioning information of the background image. Next we will modify the first 0 to achieve the animation effect of moving the background image to the left. If you want to achieve the effect of moving up and down, you need to modify the second 0. Let's look at the JS Code:

 //  GET header object  VaR Header = $ ('header' );  //  Set the initial value of the background Header.css ('backgroundposition', '0 0' );  //  Define animation Functions  VaR Bgscroll = Function (){  //  Obtain the current X axis position      VaR Current = parseint(header.css ('backgroundposition'). Split ('') [0 ]),  //  Set new location Newbgpos = (current-1) + 'px 0px' ;  //  Assign a variable to the background-position attribute of CSS. Header.css ('backgroundposition' , Newbgpos );};  //  Define cycle Setinterval (bgscroll, 75 );

The code is simple. It defines a loop event and executes bgscroll every 75 milliseconds. bgscroll obtains the current X-axis position of the background each time and performs the-1 operation, then, assign the new value to the background-position attribute of CSS. The result of executing the bgscroll function is that the background image is constantly moving to the left. If you want to move to the right, you need to change-1 to + 1.

In fact, the principle of Div + CSS animation is very simple (this is not about using CSS transition to achieve animation ), it is to set setinterval to execute an animation function every several milliseconds (with setinterval, you can achieve automatic results; of course, you can also set the click and other events of an HTML element without setting setinterval, execute the animation function in the event to achieve the effect of manual animation ). The animation function needs to modify the CSS attribute values of HTML elements, sometimes the background-position, and more often the left or top attribute values. By adding or removing HTML elements, you can change the position of HTML elements on the top, bottom, and left pages of the page. For the left attribute value, refer to this site: http://www.w3school.com.cn/css/pr_pos_left.asp.

Of course, assigning values to left and top of HTML elements is sometimes not enough. You may also need to operate their position attribute to achieve a reasonable layout. You can refer to here to learn the position attribute: http://www.w3school.com.cn/css/css_positioning.asp.

Thoroughly grasp the position, left, and other CSS attributes, and return the header to see the previousArticleI think you can understand how the previous animation was implemented.

I hope this article will help you understand the implementation of jquery animation effects. Demo: jquery.animate.animated-header.rar