原文：http://www.webdm.cn/webcode/75de64a9-3fb4-473d-bc2c-97a0a063be79.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery实现的图标抖动效果_网页代码站(www.webdm.cn)</title> <script src="http://www.webdm.cn/themes/script/jquery.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> <p class="tips">Tip: You may need to use the browser like chrome锛?firefox or safari which supports CSS attribute to watch this rotate effect...</p> <div class="dock"> <img src="http://www.webdm.cn/images/20130701/FireFox.png" class="rotate" alt="icon"/> <img src="http://www.webdm.cn/images/20130701/IE.png" class="rotate" alt="icon"/> </div> <img class="board" src="http://www.webdm.cn/images/20130701/woodboard1.png" /> <br /> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p> </body> </html>