码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-09-07 09:54:39      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:width   背景   html   代码   dex   alt   swipe   屏幕   背景图   

  今天遇到了全屏翻滚的网站首页,自然客户要求图片不能大量变形,于是,我通过写两个不同的类(每个类里面的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代码如下:

技术分享

 

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

标签:width   背景   html   代码   dex   alt   swipe   屏幕   背景图   

原文地址:http://www.cnblogs.com/candy-Yao/p/7487983.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!