-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathadv2.html
110 lines (80 loc) · 4.36 KB
/
adv2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<html>
<body style="margin:0px">
<script type="text/javascript"><!--
// document = top.document;
google_ad_client = "pub-6531063547301416";
/* 728x15, utworzono 11-03-14 */
google_ad_slot = "1434161064";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div style="display:none">
<!-- google_ad_section_start -->
Examples
Documentation
This is a small plugin for jQuery that adds a nice feature to rotate images by a given angle on web pages.
Description:
This is a simple plugin to allow you to rotate images (any angle) directly on client side (for ex. user generated content), and animate them using own functions. Main focus is to unify this behavior across different browsers.
Supported Browsers:
Internet Explorer 6.0 >
Firefox 2.0 >
Safari 3 >
Opera 9 >
Google Chrome
Notices:
Include script after including main jQuery. Whole plugin uses jQuery namespace and should be compatible with older version (unchecked).
Please put all issues into a ISSUES page. If you want you can also checkout repository and make path on your own, but just let me know before doing any changes.
Implementation:
To support so many old browsers there are few techniques being used:
For modern browsers (Safari, Chrome, Opera, IE 9) plugin uses native CSS3 attributes (-ms-transform, -transform-property, -webkit-transform, -o-transform).
For older browsers with CANVAS support image is being replaced by a CANVAS component that can be easily rotated using internal canvas methods,
For older IE browsers VML is being used in similar way as SVG,
Changelog
Example 1
Simply rotate an image
Example 2
This is simple example that rotates image when user mouseover/mouseout object.
Mouseover arrow to see effect.
Example 3
Rotate image endlessly
Rotate image endlessly using recursive function
Rotate image endlessly using recursive function and custom easing (similar to example with simple endless rotation)
Example 4
Animation rotate using easing from http://gsgd.co.uk/sandbox/jquery/easing/
(remember to also include script contains easing)
rotate(angle)
angle[Number] - default 0 - Simply rotates given image by a given angle
Example:
rotate(parameters)
parameters
[Object] Object containing parameters for rotation. Supported attributes:
angle
[Number] - default 0 - Angle value in degrees of an rotation to be executed immediately
Example:
bind
[Object] Object containing events to bound on a rotation object. $(this) inside events points to a rotation object - this way you can chain execution of rotations - $(this).rotate(...)
Example (click on arrow):
animateTo
[Number] - default 0 - Angle value in degrees of an rotation to be animated to from current angle value (or given angle parameter)
Example:
See angle example.
duration
[Number] - default 1000 - Specifies a duration of a animation when using animateTo action
Example (click on arrow):
easing
[Function] - default (see 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 please see documentation at their website). Remember to include easing plugin before using it in jQueryRotate!
Default function:
function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }
Example (click on arrow):
callback
[Function] A function to be called when animation finishes.
Example (click on arrow):
If you're interested in more examples please go here: Examples
<!-- google_ad_section_end -->
</div>
</body>
</html>