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>

 

posted @ 2017-01-12 11:16  这个名字想了很久~  阅读(513)  评论(0)  编辑  收藏  举报