zoukankan      html  css  js  c++  java
  • jQuery旋转插件—rotate

    jQuery旋转插件,支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome

    rotate(angle)

    正值表示顺时针方向旋转,负值表示逆时针方向旋转。

    jqueryRotate下载

    使用方法:

    旋转到指定角度

    $("ID").rotate(45);
     <div id="start"><img src="start.png" id="startbtn"></div> 
    <script type="text/javascript">
        $(function(){
            $("#startbtn").click(function(){
                    $(this).rotate({
                    duration:3000,                    //持续时间
                    angle:0,                        //起始角度
                    animateTo:90,                    //结束的角度
                    easing:$.easing.easeOutSine,     //定义运动的效果,需要引用jquery.easing.min.js的文件
                    callback:function(){            //回调函数
                        alert("结束");
                    }
                    })
            })
        })
    </script>

     更多可以测试:http://jsfiddle.net/RwEme/

    防止运行时重复点击

    <script type="text/javascript">
        $(function()
        {
            clickbtn=false;
    
            $("#startbtn").live("click",function()
            {
                if(clickbtn==false)
                {
                    clickbtn=true;
                    var a=Math.floor(Math.random()*360);
                        $(this).rotate(
                    {
                        duration:3000,
                        angle:0,
                        animateTo:1000+a,
                        callback:function()
                        {
                            clickbtn=false;
                            alert(clickbtn);
                        }
                    })
                }
                
                
            })
        })
    
    </script>

     应用实例:

    幸运大转盘:http://www.helloweba.com/view-blog-215.html

  • 相关阅读:
    【xinsir】githook之precommit分享
    node进程一些信号的意义
    ES6篇
    Webpack4篇
    Node篇
    Vuex篇
    WebStorage篇
    HTML5篇
    html5语义化标签大全
    emmet语法
  • 原文地址:https://www.cnblogs.com/tinyphp/p/3489524.html
Copyright © 2011-2022 走看看