以下是本人原创，如若转载和使用请注明转载地址。本博客信息切勿用于商业，可以个人使用，若喜欢我的博客，请关注我，谢谢！博客地址
感谢您支持我的博客，我的动力是您的支持和关注！如若转载和使用请注明转载地址，并且请尊重劳动成果，谢谢！
点击图标不断震动效果
这是完全震动的情况，之后介绍，添加按钮实现震动的切换动画。。
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{ 650px; margin:110px auto 0; font-family:Verdana, Geneva, sans-serif; color:#FFC; font-size:26px;}.dock{ margin:90px auto 0; 500px; }.board{ float:left; margin-top:-60px; z-index:0;}.rotate{ 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