0

我正在尝试通过移动我的 div 上的背景图像的背景位置（帧）来制作一个小动画。我正在使用 Jquery 来制作这个动画。我在背景图像上有 6 帧，第一帧从 0,0px 开始，第二帧从 85px,0 开始，第三帧从 172px,0 开始，依此类推。我想在这些帧之间转换，直到单击停止。我的 jquery 代码粘贴在下面。我已经为像素移动了一个数组。我希望每帧最多保持 1000 毫秒，然后转换到下一帧。我在某处出错但无法弄清楚在哪里..这是我的代码

$(document).ready(function () {
    var timer;
    $("#clickMe").click(function() {
        //alert("you are here");
        timer=setInterval(moveframe,1000);
    });
    $("#stop").click(function() {
        clearInterval(timer);
    });
});

function moveframe() {
    var framespx=[0,85,172,256,512,1024];
    for (var i=0;i<framespx.length;i++) {
        alert("you ar here");
        var xPos=framespx[i]+"px ";
        var yPos="0px";
        $('.fixed').css({backgroundPosition: xPos+yPos});
    }
}
4

2 回答 2

0

你的代码看起来有一些逻辑错误，运行你的代码，就可以看到相同的背景。

尝试：

$(document).ready(function () {
    var timer;
    $("#clickMe").click(function() {
    //alert("you are here");
        timer=setInterval(moveframe,1000);
    });
    $("#stop").click(function() {
        clearInterval(timer);
    });
});
var j=0;
function moveframe() {
    var framespx=[0,85,172,256,512,1024];
    for (var i=0;i<framespx.length;i++) {
        if (j%framespx.length == i){
            alert("you ar here");
            var xPos=framespx[i]+"px ";
            var yPos="0px";
            $('.fixed').css({backgroundPosition: xPos+yPos});
            j++
            break;
        }
    }
}
于 2013-07-31T05:38:05.847 回答
0 
 css({'background-position': xPos+' '+yPos});

好的，上面的属性值对我来说有点令人困惑，希望这是正确的，但更可靠；

css('background-position-x', xPos);
css('background-position-y', yPos);

现在我认为for循环在这里不是强制性的

var posAry=[0,85,172,256,512,1024];
var currPos=0;
var timer;
$(document).ready(function () {

    $("#start").click(function() {       
      timer=setInterval(move,1000);        
   });
   $("#stop").click(function() {
     clearInterval(timer);
   });
});


function move() {  
  $('.fixed').css({'margin-left': posAry[currPos]+'px' }); /**you can change it to background postion/padding/... as needed by you**/
  currPos++;
  if(currPos==(posAry.length))
    currPos=0; // for looping back
}

http://jsfiddle.net/7PvwN/1/

于 2013-07-31T05:23:27.453 回答