0

次のスクリプトは、ほとんどのブラウザーで完全に機能しますが、Firefox ではまったく機能しません。誰かが何か考えを持っているなら、それは大きな助けになるでしょう。スプライトボタンを作成しようとしているjQueryを含めました。

<script type='text/javascript'>
$(document).ready(function() {

var intval="";
var rewind ="";
$('#logo').hover(function(){
    if(intval==""){
        intval =window.setInterval(play_animation,30);
    }
},function(){
    window.clearInterval(intval);
    intval="";
    if(rewind==""){
        rewind=window.setInterval(rewind_animation,30);
    }
});

function play_animation(){
    //retrieve background x-coordinate because IE only recognize 'background-position
    var frame = $('#logo').css('background-position-x').split(' ');
    var framei =parseInt(frame[0].split('px'));
    if(framei > (-360)){
        var xpos =framei-40;
        $('#logo').css({'backgroundPosition':xpos+'px 0px'});
    }
}

function rewind_animation(){
    var frame = $('#logo').css('background-position-x').split(' ');
    var framei =parseInt(frame[0].split('px'));
    //if background position exist, rewind back to starting point
    if(framei ){
        var xpos =framei+40;
        $('#logo').css({'backgroundPosition':xpos+'px 0px'});
    }
    //when animation returns to starting point clear out the interval function
    if(framei==0){
        window.clearInterval(rewind);
        rewind="";
    }
}

});
</script>

および初期 CSS:

#logo{
 background:url(circles2.jpg) 0px 0px no-repeat;
 height:40px;
 width:40px;
 display:block;
}
4

1 に答える 1

3

あなたが持っている場所var frame = $('#logo').css('background-position-x').split(' ');

あなたが実際に望んでいると思いますvar frame = $('#logo').css('background-position').split(' ');（「-x」を削除してください）。それは私のためにそれを修正します。

于 2012-05-26T07:54:19.750 に答える