Question

请您在这个主页上看一下屏幕尺寸较大的Google Chrome（问题出现在1870px和1920px之间）： http://theatredulamparo.fr

实际上，当您从左向右滚动窗口时，背景位置会更改以显示精灵中包含的图片并打开大顶门，但在这种情况下，它也会从上到下移动，这是不是预期的。我有点麻烦，因为问题在其他浏览器上没有显示（Safari和Firefox都可以）。

有什么想法吗？

这是我的代码：

    var portion = 0;
    var numPortion = 0;
    var chemin = "";
    var largeur =0;
    var hauteur = 0;
    var position = 0;
    var entrer2 = null;

    function Initwrap(){
       largeur = $('#wrapperbg').width();
       hauteur = (largeur*0.590277778)-1;
       $('#wrapperbg').height(hauteur);
    }

    // Changer le background position du sprite
    function BgAnim(hauteur, position){
      $('#wrapperbg').css({"background-position": "0 -"+position+"px", "height":hauteur});
    }

    function Entrer(chemin, numPortion, hauteur){
        //Cacher les boutons
        $('.callto').hide();
        //Lancer l'animation d'entrée dans chapiteau
        entrer2 = setInterval(function(){
    if (numPortion<=20){
        position = (hauteur+1)*numPortion;
        BgAnim(hauteur, position);
        numPortion++;
    } else {
        clearInterval(entrer2);
        window.location=chemin;
    }
}, 100);
    }


    $(document).ready(function(){

Initwrap();



    //lorsque la souris se déplace dans la page
    $("body").mousemove(function(e){

        Initwrap();

        portion = $('body').width()/9; //découpage écran en 12 portions (12 images)
        numPortion = Math.floor(e.pageX/portion); //la portion où se trouve la souris

        position = (hauteur+1)*numPortion;

        // lorsque la souris sort du cadre
        if(numPortion>8){
            position=8;
        }
        if(numPortion<0){
            position=0;
        }

        if(largeur > 1024){
            BgAnim(hauteur, position); //lance l'effet de survol
        }
    });


    //Au click sur un call2action
    $('#callto1').click(function(e){
        if(largeur > 1024){
            e.preventDefault();
            //chemin ='tpl_actu_fiche.html';
            chemin ='index.php?id=2';
            $("body").unbind('mousemove');
            Entrer(chemin, numPortion, hauteur);
        }
    });

    $('#callto2').click(function(e){
        if(largeur > 1024){
            e.preventDefault();
            //chemin ='tpl_contact.html';
            chemin ='index.php?id=30';
            $("body").unbind('mousemove');
            Entrer(chemin, numPortion, hauteur);
        }
    });



    });

    $(window).resize(function(){
        portion = 0;
        numPortion = 0;
        chemin = "";
        position = 0;
        entrer2 = null;
        largeur = $('#wrapperbg').width();

        Initwrap();

        if(largeur > 1024){
            BgAnim(hauteur, position); //lance l'effet de survol
        }

    });

Answer 1

我可以使用background-size:cover

将其置于工作状态

#wrapperbg{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  -moz-background-size: cover;
  background-size: cover;
  margin: 0;
  padding: 0;
  background-image: url('../images/animation/spritechap.jpg');
}

在Chrome中的大屏幕上的Javascript背景位置

1 个答案: