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

Javascript background-position on large screen in Chrome

本文关键字:Javascript 背景 位置 大屏幕 Chrome      更新时间:2023-09-26

你能看看这个大屏幕的谷歌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
        }
    });

我能够通过使用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');
}