0
votes

changer de fond quand rafraîchi, mais réactif

J'ai actuellement ce code JavaScript dans mon étiquette de tête qui rend le changement d'arrière-plan chaque fois que la page est actualisée. Cela fonctionne bien, cependant, j'aimerais avoir des "ensembles d'images" différents (1.png, 2.png, 3.png vs 1mini.png, 2mini.png, 3mini.png), une pour la version de bureau et une autre pour la version mobile. aucune idée sur la façon de faire cela? XXX

javascript responsive-design media-queries responsive

1 commentaires

Avez-vous déjà entendu parler de Srcsets? Cela pourrait être une solution: développeur.mozilla.org/en- US / Docs / Apprendre / HTML / ...

4 Réponses :

0
votes

Vous pouvez définir l'image d'arrière-plan en vérifiant si l'appareil est mobile ou de bureau.

par exemple:

J'ai actuellement ce code JavaScript dans mon étiquette de tête qui rend le changement d'arrière-plan à chaque fois la page. est rafraîchi. Cela fonctionne bien, cependant, j'aimerais avoir des "ensembles d'images" différents (1.png, 2.png, 3.png vs 1mini.png, 2mini.png, 3mini.png), une pour la version de bureau et une autre pour la version mobile. aucune idée sur la façon de faire cela? xxx

2 commentaires

J'ai essayé cela, mais ça ne marche pas. Je suppose que c'est parce que le code ne renvoie pas vrai comme Var NewimGnumber = math.floor (math.random () * myImages.length); ne correspond plus avec myimages plus

@ user11136133 J'ai modifié le code ci-dessus. Essayez de l'utiliser à nouveau.

0
votes

`You can go for some queries depending on your device viewport.`
    function changeBg(){
       var width = window.innerWitdh;
        var myImages = ["images/1.png", "images/2.png", "images/3.png", 
                       "images/1mini.png", "images/2mini.png", "images/3mini.png" ];
        if(width > 1200){ // lets say here is a desktop
          document.body.style.backgroundImage = 'url('+ myImages[1] +')';
        }else if(width < 1200 && width > 700){ // some smaller device
         document.body.style.backgroundImage = 'url('+ myImages[2] +')';
        }else { // this can be mobile
         document.body.style.backgroundImage = 'url('+ myImages[3] +')';
        }
    }

0 commentaires

0
votes

Vous pouvez utiliser la requête multimédia avec différentes classes CSS pouvant être utilisées comme arrière-plan.

<html>
   <div class='background'>
     <div class="img1"/>
     <div class="img2"/>
     <div class="img3"/>

2 commentaires

Bonjour, cela semble simple. Une idée de l'intégration de ces classes ou des balises IMG au code JavaScript que j'ai?

Eh bien, vous pouvez utiliser votre fonction - juste au lieu d'une matrice avec IMG Créer une maquette de «classes de noms» et d'utiliser au hasard dessus, de sorte que cela générerait une image aléatoire sur votre site. La responsabilité sera faite automatiquement par la requête multimédia dans votre fichier CSS. Je vais éditer mon post.

0
votes

Exemple de travail

    function changeImg(imgNumber) {

        var myImages = [{
                isMobile: true,
                image: "https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg"
            },
            {
                isMobile: false,
                image: "https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
            },
            {
                isMobile: true,
                image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTptDddyBZG4i4cycd6ZIBP2wT8PQKhihUqenZF7GpzlvTZuPghGQ"
            },
            {
                isMobile: false,
                image: "http://sfwallpaper.com/images/background-wallpaper-images-3.jpg"
            }
        ];

        var imgShown = document.body.style.backgroundImage;
        var filteredArray = [];
        if (isMobile()) {
            filteredArray = myImages.filter(function(el) {
                return el.isMobile == true;
            });
        } else {
            filteredArray = myImages.filter(function(el) {
                return el.isMobile == false;
            });
        }
        var newImgNumber = Math.floor(Math.random() * filteredArray.length);
        console.log("newImgNumber", newImgNumber);
        document.body.style.backgroundImage = 'url(' + filteredArray[newImgNumber].image + ')';
    }



function isMobile() {
    var match = window.matchMedia || window.msMatchMedia;
    if (match) {
        var mq = match("(pointer:coarse)");
        return mq.matches;
    }
    return false;
}

window.onload = changeImg;

0 commentaires