当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How could I progress the sprite animation on scroll?

问题描述:

I am newbie. I can't sprite animation using jquery..

What's the problem?

How can make progressing the sprite animation on the spot loop as scroll??

$(window).scroll('scroll',function(e){

parallaxScroll();

});

function parallaxScroll() {

var ani_data = [0, -120, -240, -480];

var frame_index = 0;

if ( ScrollCount == 3 ) {

ScrollCount = 1;

$('#fatherwalk').css('background-position', ani_data[frame_index] + 'px 0px');

frame_index++;

if ( frame_index >= ani_data.length ) {

frame_index = 0;

}

}

scrollcount++;

}

网友答案:

Why you don't get a shortcut and try SpinJS? http://fgnass.github.io/spin.js/

It's so easy to implement and works fine. Here is a Sample that I've made on JSFiddle Below a quick implementation of the JS:

$.fn.spin = function (opts) {
    this.each(function () {
        var $this = $(this),
            spinner = $this.data('spinner');

        if (spinner) spinner.stop();
        if (opts !== false) {
            opts = $.extend({
                color: $this.css('color')
            }, opts);
            spinner = new Spinner(opts).spin(this);
            $this.data('spinner', spinner);
        }
    });
    return this;
};

$(function () {
    $(".spinner-link").click(function (e) {
        e.preventDefault();
        $(this).hide();
        var opts = {
            lines: 12, // The number of lines to draw
            length: 7, // The length of each line
            width: 5, // The line thickness
            radius: 10, // The radius of the inner circle
            color: '#fff', // #rbg or #rrggbb
            speed: 1, // Rounds per second
            trail: 66, // Afterglow percentage
            shadow: true // Whether to render a shadow
        };
        $("#spin").show().spin(opts);
    });
});

Hope this helps.

分享给朋友:
您可能感兴趣的文章:
随机阅读: