Question

我想在按钮点击时滚动所有图像。我想在按停止时停止滚动图像按钮。我在圈子上有多个图像我想滚动所有图像。我谷歌找到了最好的解决方案。实际上我无法将它集成到我的代码中。

这是我的问题的解决方案 How to create circular animation with different objects using jQuery?

我想把它与我的小提琴融为一体。请你帮助我。

<button id ='start'>start</button>
<button id='stop'>stop</button>
<div>

<img src="https://dl.dropbox.com/s/66ip1iz8cm3wf2l/dial.png" style="position:absolute;top:=;left:;" id="dial"></img>
    <img src="https://dl.dropbox.com/s/siqq3e8kdaefqn8/icon_0.png" style="position:absolute;top:60px;left:190px;" id="dial"></img>

    <img src="https://dl.dropbox.com/s/zikxwpakha2ei1v/icon_1.png" style="position:absolute;top:100px;left:100px;" id="dial"></img>
    <img src="https://dl.dropbox.com/s/dn5n76r6yr1tzpd/icon_2.png" style="position:absolute;top:180px;left:70px;" id="dial"></img>
    <img src="https://dl.dropbox.com/s/vu9uckyoo7k8wcc/icon_3.png" style="position:absolute;top:270px;left:70px;" id="1"></img>
    <img src="https://dl.dropbox.com/s/lnb9h4hazcd619u/icon_4.png" style="position:absolute;top:370px;left:110px;" id="dial"></img>
    <img src="https://dl.dropbox.com/s/pt0q3zbdxt3843d/icon_5.png" style="position:absolute;top:420px;left:230px;" id="dial"></img>
    <img src="https://dl.dropbox.com/s/j9ybktafm0v08ff/icon_6.png" style="position:absolute;top:350px;left:340px;" id="dial"></img>
    <img src="https://dl.dropbox.com/s/nuh0njoeczd94gm/icon_7.png" style="position:absolute;top:250px;left:390px;" id="dial"></img>

    <div>

最佳解决方案就是这个.. http://jsfiddle.net/SaNtf/3/

Answer 1

你的小提琴根本就是空的，请为将来展示一些努力并尝试看看：http://msmvps.com/blogs/jon_skeet/archive/2010/08/29/writing-the-perfect-question.aspx。

您必须将图片ID更改为唯一。您可以在boxes对象数组中设置图像，而不是更改unit的代码以及左侧和顶部值的集合。

代码：

$(document).ready(function(e) {
    var timer = null;
    var animating = false;
    var unit = 200;

    var boxes = [
            {
                selector: '#dial2',
                angle: 90,
                finalAngle: 90,
                stop: false,
            },
            {
                selector: '#dial3',
                angle: 45,
                finalAngle: 90,
                stop: false,
            },
            {
                selector: '#dial4',
                angle: 315,
                finalAngle: 90,
                stop: false,
            },
            {
                selector: '#dial5',
                angle: 270,
                finalAngle: 90,
                stop: false,
            },
            {
                selector: '#dial6',
                angle: 225,
                finalAngle: 90,
                stop: false,
            },
            {
                selector: '#dial7',
                angle: 135,
                finalAngle: 90,
                stop: false,
            },
            {
                selector: '#dial8',
                angle: 0,
                finalAngle: 90,
                stop: false,
            },
            {
                selector: '#1',
                angle: 180,
                finalAngle: 90,
                stop: false,
            }
        ];

    $.each(boxes, function(idx, val){
        val.currentAngle = val.angle;

        $(val.selector).on('click', function(){ 
            if (!val.stop){
                console.log('box: ' + val.selector + ' will stop');
                val.stop = true;
            }
        });
    });

    var checkStop = function(){
        var stop = true;
        $.each(boxes, function(idx, val){
            if (!boxes[idx].stopped){
                stop = false;
            }
        });
        return stop;      
    };

    var animate = function(){

        $.each(boxes, function(idx, val){

            if (!boxes[idx].stopped){

                var rad = boxes[idx].currentAngle * (Math.PI / 180);

                $(boxes[idx].selector).css({
                    left: 225 + Math.cos(rad) * unit + 'px',
                    top: unit * (1 - Math.sin(rad)) +40 + 'px'
                });
                if (((boxes[idx].finalAngle - boxes[idx].currentAngle) % 360 == 0) && boxes[idx].stop == true){
                    boxes[idx].stopped = true;
                } 
                boxes[idx].currentAngle--;
            }

        });

        if (checkStop()){
             clearInterval(timer);   
        }
    }

    timer = setInterval(animate, 20);

});

演示：http://jsfiddle.net/IrvinDominin/Krukd/1

在jquery中滚动图像时需要动画

1 个答案: