jQueryRotate传数组

daswcszxw 2017-04-18 10:43:12

想用jQueryRotate做个码表的动画效果。
但jQueryRotate function只？支持传值进去。
现在想传数据，或者构造多个$(this).rotate({})方法
形成加速，减速效果。
我尝试了多种方法，也改了jQueryRotate插件里的方法都没成功。

求指点。



<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>jqueryrotate</title>



    </head>

    <body>

        <div style="width:500px;margin:0 auto">

            <h3>演示六、点击旋转一</h3>

            <img id="img6" src="http://avatar.csdn.net/B/3/A/1_webyellow.jpg" width="256" height="256"/>

        </div>

        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>

        <script type="text/javascript" src="http://www.jq22.com/demo/choujiang/js/jQueryRotate.2.2.js"></script>

        <script>

            $(function() {

                $("#img6").rotate({

                    bind:

					{

						click: function() {

							$(this).rotate({

								angle: 0,

								animateTo: 50,

								duration: 1000,

								callback: function () {

									$("#img6").rotate({angle:48});

								}

							});

						}

					}



                });



            });

        </script>

    </body>

</html>

...全文

168 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

Hello World, 2017-04-18

打赏
举报


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <img src="http://avatar.csdn.net/B/3/A/1_webyellow.jpg" width="256" height="256" id="img" style="margin-top:100px; margin-left:100px;" />
</body>
</html>
<script src="JS/jquery.min.js"></script>
<script src="JS/jquery.easing.min.js"></script>
<script src="JS/jQueryRotate.js"></script>
<script>
    $("#img").rotate({
        bind: {
            click: function () {
                $(this).rotate({
                    angle: 0,
                    animateTo: 3600,
                    duration: 6000,
                    easing: $.easing.easeInOutQuart
                })
            }
        }
    });
</script>

真要不行就自己写函数了

daswcszxw 2017-04-18

打赏
举报

引用 1 楼 apollokk 的回复:

我有尝试用jquery.easing里的easeOutElastic，easeInBounce等方法，效果都不行，还得改他。

Hello World, 2017-04-18

打赏
举报

Go 旅城通票 2017-04-18

打赏
举报

引用 7 楼 webyellow 的回复:

[quote=引用 6 楼 showbo 的回复:]顺序不久构造多少个rotate的配置放入数组中splice第一个执行直到全部执行完毕。。



 click: function () {

                        $(this).rotate({

                            angle: 0,

                            animateTo: 20,

                            duration: 1000,

                            easing: $.easing.backout

                        }),$(this).rotate({

                            angle: 0,

                            animateTo: 80,

                            duration: 1000,

                            easing: $.easing.backout

                        });

                    }

想要这种，按照顺序执行。setTimeout不行了。传数组怎么设置？[/quote]
注意动作一定要有animateTo动画效果，要不不执行callback

jQuery.extend(jQuery.easing, { backout: function (x, t, b, c, d) { var s = 1.70158; return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b } });

       $(function () {

            function executeActions(el, actions) {

                var config = actions.splice(0, 1)[0];

                console.log(config)

                if (config) {

                    config.callback = function () { executeActions(el, actions); }

                    config.easing= $.easing.backout

                    el.rotate(config);

                }

                else {

                    alert('指令执行完毕！')

                    el.data('executing', false);

                }

            }

            $("#img6").rotate({

                bind:

                {

                    click: function () {

                        var el = $(this);

                        if (el.data('executing')) return;//指令未执行完

                        el.data('executing', true);

                        executeActions($(this), [{ angle: 0, animateTo: 50, duration: 1000 }, { animateTo: 30, duration: 100 }, {animateTo: 180, duration: 1000 }]);

                       

                    }

                }



            });

        });

daswcszxw 2017-04-18

打赏
举报

引用 6 楼 showbo 的回复:

顺序不久构造多少个rotate的配置放入数组中splice第一个执行直到全部执行完毕。。


 click: function () {
                        $(this).rotate({
                            angle: 0,
                            animateTo: 20,
                            duration: 1000,
                            easing: $.easing.backout
                        }),$(this).rotate({
                            angle: 0,
                            animateTo: 80,
                            duration: 1000,
                            easing: $.easing.backout
                        });
                    }

想要这种，按照顺序执行。setTimeout不行了。传数组怎么设置？

Go 旅城通票 2017-04-18

打赏
举报

引用 5 楼 webyellow 的回复:

[quote=引用 4 楼 showbo 的回复:] 其实改写jquery擦除效果就行。。
<!doctype html>
</html>

jQuery.easing 只是添加了过度效果。



$(this).rotate({
                            angle: 0,
                            animateTo: 20,
                            duration: 1000,
                            easing: $.easing.backout
                        });

想在点击时候支持执行多个 $(this).rotate({}); 再根据支持次数给填上animateTo 填写上递增的随意数，就成加速的码表了。。。 [/quote] 形成加速，减速效果不就是重写擦除效果就好了。。支持执行多个 $(this).rotate({});是什么意思？并发执行还顺序？顺序不久构造多少个rotate的配置放入数组中splice第一个执行直到全部执行完毕。。

daswcszxw 2017-04-18

打赏
举报

引用 4 楼 showbo 的回复:

其实改写jquery擦除效果就行。。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jqueryrotate</title>

</head>
<body>
    <div style="width:500px;margin:0 auto">
        <h3>演示六、点击旋转一</h3>
        <img id="img6" src="http://avatar.csdn.net/B/3/A/1_webyellow.jpg" width="256" height="256" />
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    <script type="text/javascript" src="http://www.jq22.com/demo/choujiang/js/jQueryRotate.2.2.js"></script>
    <script>
        jQuery.extend(jQuery.easing, { backout: function (x, t, b, c, d) { var s = 1.70158; return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b } });
    </script>
    <script>
        $(function () {
            $("#img6").rotate({
                bind:
                {
                    click: function () {
                        $(this).rotate({
                            angle: 0,
                            animateTo: 180,
                            duration: 1000,
                            easing: $.easing.backout
                        });
                    }
                }

            });

        });
    </script>
</body>
</html>

jQuery.easing 只是添加了过度效果。



$(this).rotate({
                            angle: 0,
                            animateTo: 20,
                            duration: 1000,
                            easing: $.easing.backout
                        });

想在点击时候支持执行多个 $(this).rotate({}); 再根据支持次数给填上animateTo 填写上递增的随意数，就成加速的码表了。。。

Go 旅城通票 2017-04-18

打赏
举报

其实改写jquery擦除效果就行。。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jqueryrotate</title>

</head>
<body>
    <div style="width:500px;margin:0 auto">
        <h3>演示六、点击旋转一</h3>
        <img id="img6" src="http://avatar.csdn.net/B/3/A/1_webyellow.jpg" width="256" height="256" />
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    <script type="text/javascript" src="http://www.jq22.com/demo/choujiang/js/jQueryRotate.2.2.js"></script>
    <script>
        jQuery.extend(jQuery.easing, { backout: function (x, t, b, c, d) { var s = 1.70158; return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b } });
    </script>
    <script>
        $(function () {
            $("#img6").rotate({
                bind:
                {
                    click: function () {
                        $(this).rotate({
                            angle: 0,
                            animateTo: 180,
                            duration: 1000,
                            easing: $.easing.backout
                        });
                    }
                }

            });

        });
    </script>
</body>
</html>