点击图标不断震动效果

最新推荐文章于 2025-09-07 16:21:03 发布

weixin_34190136

最新推荐文章于 2025-09-07 16:21:03 发布

阅读量172

点赞数

文章标签： xhtml

以下是本人原创，如若转载和使用请注明转载地址。本博客信息切勿用于商业，可以个人使用，若喜欢我的博客，请关注我，谢谢！ 博客地址

感谢您支持我的博客，我的动力是您的支持和关注！如若转载和使用请注明转载地址，并且请尊重劳动成果，谢谢！

点击图标不断震动效果

这是完全震动的情况，之后介绍，添加按钮实现震动的切换动画。。

        <!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
        >
       
        <
        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
        >

我们在页面上添加一个按钮

  
        $("#editId").click(function(){
       
        $("#xycoordiv li").toggleClass("rotate");
       
        state1();   
       
        });

有关css中的切换操作可以参考我的这篇博文http://www.cnblogs.com/wang3680/p/34ecdc2df481749ba53bc80ed5178309.html

来自为知笔记(Wiz)