专题1234导航

jQueryRotate传数组

来源:互联网
发表时间:2017/4/19 10:35:35
责任编辑:鲁晓倩
字体:
为了帮助网友解决“jQueryRotate传数组”相关的问题,mr007通过互联网对“jQueryRotate传数组”相关的解决方案进行了整理,用户详细问题包括:想用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://pic.xue163.com/http://avatar.csdn.net/B/3/A/1_webyellow.jpg" width="256" height="256"/>
        </div>
        <script type="text/javascript" src="http://pic.xue163.com/http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
        <script type="text/javascript" src="http://pic.xue163.com/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>
,具体解决方案如下:
解决方案1:
点击图片看大图mr007 www.xue163.com
解决方案2:
引用 1 楼 apollokk 的回复:
点击图片看大图mr007 www.xue163.com


我有尝试用jquery.easing里的easeOutElastic,easeInBounce等方法,效果都不行,还得改他。
解决方案3:

<!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://pic.xue163.com/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="http://www.xue163.com/JS/jquery.min.js"></script>
<script src="http://www.xue163.com/JS/jquery.easing.min.js"></script>
<script src="http://www.xue163.com/JS/jQueryRotate.js"></script>
<script>
    $("#img").rotate({
        bind: {
            click: function () {
                $(this).rotate({
                    angle: 0,
                    animateTo: 3600,
                    duration: 6000,
                    easing: $.easing.easeInOutQuart
                })
            }
        }
    });
</script>
真要不行就自己写函数了
解决方案4:
其实改写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://pic.xue163.com/http://avatar.csdn.net/B/3/A/1_webyellow.jpg" width="256" height="256" />
    </div>
    <script type="text/javascript" src="http://pic.xue163.com/http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    <script type="text/javascript" src="http://pic.xue163.com/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>
解决方案5:
引用 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://pic.xue163.com/http://avatar.csdn.net/B/3/A/1_webyellow.jpg" width="256" height="256" />
    </div>
    <script type="text/javascript" src="http://pic.xue163.com/http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    <script type="text/javascript" src="http://pic.xue163.com/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 填写上递增的随意数,就成加速的码表了。。。
解决方案6:
引用 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 填写上递增的随意数,就成加速的码表了。。。

形成加速,减速效果不就是重写擦除效果就好了。。支持执行多个 $(this).rotate({});是什么意思?并发执行还顺序?

顺序不久构造多少个rotate的配置放入数组中splice第一个执行直到全部执行完毕。。
解决方案7:
引用 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不行了。传数组怎么设置?
解决方案8:
本帖最后由 showbo 于 2017-04-18 21:40:10 编辑
引用 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不行了。传数组怎么设置?

注意动作一定要有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 }]);
                       
                    }
                }

            });
        });
www.xue163.com true http://www.xue163.com/588880/39215/392157080.html report 25822 jQueryRotate传数组:解决方案1:解决方案2:引用 1 楼 apollokk 的回复:我有尝试用jquery.easing里的easeOutElastic,easeInBounce等方法,效果都不行,还得改他。解决方案3:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/...
最近关注
首页推荐
热门图片
最新添加资讯
24小时热门资讯
精彩资讯
精彩推荐
热点推荐
真视界
精彩图片
社区精粹
关于本站 | 广告服务 | 手机版 | 商务合作 | 免责申明 | 招聘信息 | 联系我们
Copyright © 2004-2016 Xue163.com All Rights Reserved. mr007 版权所有
京ICP备10044368号-1 京公网安备11010802011102号