点击图标不断震动效果
这是完全震动的情况，之后介绍，添加按钮实现震动的切换动画。。
|
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 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/><title>Rotate</title><script
src="jquery-1.5.1.min.js"></script><script>$(function(){ function state1(){ $(".rotate").removeClass("r2"); $(".rotate").addClass("r1"); setTimeout(state2,90); } function state2(){ $(".rotate").removeClass("r1"); $(".rotate").addClass("r2"); setTimeout(state1,90); } state1(); })</script><style>body{ background:url(wood-oak.jpg);}.tips{ width:650px; margin:110px auto 0; font-family:Verdana, Geneva, sans-serif; color:#FFC; font-size:26px;}.dock{ margin:90px auto 0; width:500px; }.board{ float:left; margin-top:-60px; z-index:0;}.rotate{ width:70px; height:70px; margin:20px 10px; z-index:1;}.r1{ -moz-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -o-transform:rotate(-3deg);}.r2{ -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg);}</style></head><body><div
class="dock"> <img
src="Chrome.png"
class="rotate"
alt="icon"/> <img
src="FireFox.png"
class="rotate"
alt="icon"/> <img
src="IE.png"
class="rotate"
alt="icon"/> <img
src="Opera.png"
class="rotate"
alt="icon"/> <img
src="Safari.png"
class="rotate"
alt="icon"/></div></body></html> |
我们在页面上添加一个按钮
|
1
2
3
4 |
$("#editId").click(function(){ $("#xycoordiv li").toggleClass("rotate"); state1(); }); |
有关css中的切换操作可以参考我的这篇博文http://www.cnblogs.com/wang3680/p/34ecdc2df481749ba53bc80ed5178309.html
原文：http://www.cnblogs.com/wang3680/p/cfd97e1553d03f5e19c031c0e91561e3.html