根据屏幕大小换不同背景图片

最新推荐文章于 2022-07-05 00:06:19 发布

weixin_34281537

最新推荐文章于 2022-07-05 00:06:19 发布

阅读量503

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/candy-Yao/p/7487983.html

本文介绍了一种利用jQuery根据屏幕宽度自动切换不同分辨率背景图片的方法，并提供了具体的实现代码，包括HTML结构、CSS样式及jQuery脚本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　今天遇到了全屏翻滚的网站首页，自然客户要求图片不能大量变形，于是，我通过写两个不同的类（每个类里面的background-images属性值URL不同），在页面里面通过jq判断屏幕大小，添加和删除自定义类。

　　jq代码如下：

$(function () {
        //判断是否宽屏
        var winWide = window.screen.width;
        var wideScreen = false;
        if (winWide <= 1199) {//1199及以下分辨率
            $(".swiper-wrapper > div:nth-of-type(1)").removeClass('slide1').addClass('slide1-phone');
            $(".swiper-wrapper > div:nth-of-type(2)").removeClass('slide2').addClass('slide2-phone');
            $(".swiper-wrapper > div:nth-of-type(3)").removeClass('slide3').addClass('slide3-phone');
        } else {
            $(".swiper-wrapper > div:nth-of-type(1)").addClass('slide1').removeClass('slide1-phone');
            $(".swiper-wrapper > div:nth-of-type(2)").addClass('slide2').removeClass('slide2-phone');
            $(".swiper-wrapper > div:nth-of-type(3)").addClass('slide3').removeClass('slide3-phone');
            wideScreen = true; //是宽屏
        }
})

　　css代码如下：

.slide1{
    background-image: url(../images/index-bg1.jpg);
    background-size: cover;
}
.slide1-phone {
    background-image: url(../images/mb-p1-bc.jpg);
    background-size: cover;
}
.slide2{
    background-image: url(../images/index-bg2.png);
    background-size: cover;
    text-align: center;
}
.slide2-phone {
    background-image: url(../images/mb-p2-bc.jpg);
    background-size: cover;
}
.slide3{
    background-image: url(../images/index-bg3.jpg);
    background-size: cover;
}
.slide3-phone {
    background-image: url(../images/mb-p3-bc.jpg);
    background-size: cover;
}

　　HTML代码如下：