zoukankan      html  css  js  c++  java
  • 根据屏幕大小换不同背景图片

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

    转载于:https://www.cnblogs.com/candy-Yao/p/7487983.html

  • 相关阅读:
    mini2440移植uboot 2014.04(四)
    mini2440移植uboot 2014.04(三)
    【这些年】Linux C/C++软件开发用过的工具
    Valgrind的Memcheck快速入门
    《浪潮之巅》读后感
    三层浅析及示例分析
    C语言的代码内存布局详解
    超级立方体小记
    如何和项目经理沟通产品的交付?
    CentOS配置smaba与Windows共享文件
  • 原文地址:https://www.cnblogs.com/twodog/p/12139431.html
Copyright © 2011-2022 走看看