Question

我目前在我的head标签中有此javascript代码，每次刷新页面时都会更改背景。它效果很好，但是，我希望有不同的“图像集”（1.png，2.png，3.png与1mini.png，2mini.png，3mini.png），一个用于桌面版本，另一个用于桌面版本对于移动版本。有关如何执行此操作的任何想法？

<script>
        function changeImg(imgNumber)   {
            var myImages = ["images/1.png", "images/2.png", "images/3.png", 
           "images/1mini.png", "images/2mini.png", "images/3mini.png" ]; 
            var imgShown = document.body.style.backgroundImage;
            var newImgNumber =Math.floor(Math.random()*myImages.length);
            document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';}
        window.onload=changeImg;
    </script>

Answer 1

您可以通过检查设备是移动设备还是台式机来设置背景图像。

例如：

我目前在我的head标签中有此javascript代码，每次刷新页面时都会更改背景。它效果很好，但是，我希望有不同的“图像集”（1.png，2.png，3.png与1mini.png，2mini.png，3mini.png），一个用于桌面版本，另一个用于桌面版本对于移动版本。有关如何执行此操作的任何想法？

<script>
        function changeImg(imgNumber)   {
            var mobileImages =["images/1mini.png","images/2mini.png","images/3mini.png"]; 
            var desktopImages = ["images/1.png", "images/2.png", "images/3.png"]; 

            var imgShown = document.body.style.backgroundImage;

            //this code will return true when device is mobile
            if (navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)) { 
                var newImgNumber =Math.floor(Math.random()*mobileImages.length);
                document.body.style.backgroundImage = 
                                  'url('+mobileImages[newImgNumber]+')';  
            }else{
               var newImgNumber =Math.floor(Math.random()*desktopImages.length);
               document.body.style.backgroundImage = 
                                  'url('+desktopImages[newImgNumber]+')';
            } 
        }


}

        window.onload=changeImg;
 </script>

Answer 2

`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] +')';
        }
    }

Answer 3

您可以将媒体查询与可以用作背景的不同CSS类一起使用。

@media screen and (max-width: 768px) {
 .img1 {
  background-image: url("1.jpg");
 }
 .img2 {
  background-image: url("2.jpg");
 }
}

.img1 {
 background-image: url("3.jpg")
 }
.img2 {
  background-image: url("4.jpg");
 }

并使用功能更改显示的类。

因此，您只有一个功能，它可以响应窗口大小，而无需任何其他方法-只需在CSS文件中即可。

编辑：

<script>
    function changeImg(imgNumber)   {
        var myImages = ["img1", "img2", "img3"]; 
        var newImgNumber =Math.floor(Math.random()*myImages.length);
        document.getElementByClassName(myImages[newImgNumber]).show();}
    window.onload=changeImg;
</script>

然后将display:none;放入CSS文件中。因此，您只显示“随机”选择的背景。

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

类似的东西。

Answer 4

工作示例

    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;

刷新时更改背景，但响应迅速

4 个答案: