Jquery实现的图标抖动效果

原文：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>
秒客网

Jquery实现的图标抖动效果

相关文章
