A few short jquery codes implement an image scroll up switch.

In a few short jquery codes, you can scroll up an image.

Description of the animate () parameter:

The animate () method executes the Custom Animation of the CSS property set.

This method uses the CSS style to change an element from one state to another. The CSS attribute value is gradually changed, so that you can create an animation effect.

Only numeric values can be used to create animations (such as "margin: 30px "). The string value cannot be used to create an animation (for example, "background-color: red ").

PS: however, if you reference the latest jquery ui framework, attributes such as backgroudColor and color can also achieve gradient.

PS: Use "+ =" or "-=" to create relative animations ).

First, you still need to reference the jquery framework.

First look at the effect:

OneTwoThree

Let's take a look at the Code:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
The js part can also achieve a rollback effect:
$ (Document). ready (function (){
Var Top =-350;
Var Time = 500;
Var more =-50;
Function move (){
$ ("# Box"). animate ({"margin-top": Top + more}, Time );
$ ("# Box"). animate ({"margin-top": Top}, 300 );
Top + =-350;
If (Top ==- 1050)
{
Top = 0;
More = 50;
Time = 400;
}
Else
{
Time = 500;
More =-50;
}
}
SetInterval (move, 3000 );
})
Effect:
OneTwoThree

Article Source: Xiaosheng
 http://www.colorff.com