jquery Rotary plug-in-rotate support (Ie/firefox/safariopera/chrome) _jquery

Source: Internet
Author: User

Discover an interesting jquery rotary plugin on the Internet, support Internet Explorer 6.0+, Firefox 2.0, Safari 3, Opera 9, Google Chrome, use transform in advanced browsers, Low version IE uses VML for implementation.

Calls and methods:

rotate (angle)

Angle parameter: [number]– defaults to 0– rotate the picture based on the given angle

For example:

Copy Code code as follows:

$ ("#img"). Rotate (45);

Rotate (parameters)

Parameters parameter: [Object] contains an object that rotates the parameter. Supported Properties:
1.angle Properties: [Number]–default 0– the number of angles rotated and executed immediately
For example:
Copy Code code as follows:

$ ("#img"). Rotate ({angle:45});

2.bind Properties: An [Object] object that contains events bound to a rotated object. The $ (this) inside the event points to the rotated object-so that you can call-$ (this) in the internal chain. Rotate (...). For example (click on arrow):
Copy Code code as follows:

$ ("#img"). Rotate ({bind:{

Click:function () {

$ (this). Rotate ({

angle:0,

animateto:180
})
}
}
});

3.animateTo Properties: [Number]–default 0– rotates from the current angle value to the given angle value (or the given angle parameter) For example: in combination with the above example, see Use.
4.duration Properties: [number]– specifies an animation execution duration that uses Animateto for example (click on arrow):
Copy Code code as follows:

$ ("#img"). Rotate ({bind:{
Click:function () {
$ (this). Rotate ({
duration:6000,
angle:0,
animateto:100
})
}
}
});

5.step Properties: [function]– The callback function executed in each animation step, the current angle value as the first parameter of the function
6.easing Properties: [function]– Default (below) –easing Function used to make animation look more natural. It takes five parameters (x,t,b,c,d) to support easing from http://gsgd.co.uk/sandbox/jquery/easing/(for more details ple ASE-documentation at their website). Remember to include easing plugin before using it in jqueryrotate! Default function:
Copy Code code as follows:

function (x, T, B, C, D) {return-c * (t=t/d-1) *t*t*t-1) + B;}

Where:t: Current Time,
B:beginning value,
C:change in Value,
D:duration,
X:unused
No easing (linear easing):
Copy Code code as follows:

function (x, T, B, C, D) {return (t/d) *c}

Example (click on arrow):
Copy Code code as follows:

$ ("#img"). Rotate ({bind:{
Click:function () {
$ (this). Rotate ({
angle:0,
animateto:180,
Easing: $.easing.easeinoutelastic
})
}
}
});

7.callback Properties: [function] The callback function that executes when the animation completes, for example (click on arrow):
Copy Code code as follows:

$ ("#img"). Rotate ({bind:{
Click:function () {
$ (this). Rotate ({
angle:0,
animateto:180,
Callback:function () {alert (1)}
})
}
}
});

Getrotateangle

This function simply returns the current angle of the rotated object.

For example:
Copy Code code as follows:

$ ("#img"). Rotate ({
ANGLE:45,
Bind: {
Click:function () {
Alert ($ (this). Getrotateangle ());
}
}
});

stoprotate

This function simply stops the rotation animation that is in progress.

For example:
Copy Code code as follows:

$ ("#img"). Rotate ({
Bind: {
Click:function () {
$ ("#img"). Rotate ({
angle:0,
animateto:180,
duration:6000
});
settimeout (function () {
$ ("#img"). Stoprotate ();
}, 1000);
}
}
});

With this can achieve a lot about the rotation of the Web page special effects, I used this to make a lottery big turntable, the effect is good, is no flash smooth, basic can run haha.

Jqueryrotate Project Address: http://code.google.com/p/jqueryrotate/

code example: Http://code.google.com/p/jqueryrotate/wiki/Examples

Climb up and down step by step

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.