Question

我正在使用我的网站http://plugins.krajee.com/star-rating的Bootstrap评级。我想知道是否可以逐个获取每个星星，并在页面加载时制作动画。所以，如果我有3星评级，那么当我加载页面时，我将从大到小动画的第一个星，然后是第二个，然后是第三个等等。

在这个插件中，带有repeat-x的背景图像用于星星。所以我的问题还在于，是否可以通过jQuery或css获得背景图像的一定百分比，并为此制作特定的样式。

提前致谢

Answer 1

不是真的，从它的外观来看。这个插件并没有真正以“动画中的黑客”友好方式设置。

我给了它一个公平的去，但它有点不稳定。希望它是10的首发，你可以根据需要进行润色。查看fiddle here。

var delayPerStar = 500;
var div = $('#rating').parent('div');
var siblingDiv = $('#rating').siblings('div');
var content = div.data('content');
div.attr('data-content', '');
var i=0;

var fn = function(){
var cb = function(){
    div.attr('data-content', div.attr('data-content')+content[i]);
    if(div.attr('data-content').length<=$('#rating').val()){

    siblingDiv.css({
        fontSize: 50+((content.length-(i-1)*10))+'px'
    });
    div.css({
        fontSize: 50+((content.length-(i-1)*10))+'px'
    });
    }

    siblingDiv.css({
        width: (($('#rating').val() / (i+1))*100)+'%'
    });
    if(div.attr('data-content').length == content.length){
        return;
    }
    setTimeout(cb, delayPerStar);
    i++;
};
setTimeout(cb, delayPerStar);
};
fn();

单独的背景图像与重复x

1 个答案: