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

  • 相关阅读:
    调整压力测试工具转载ibm
    Python装饰器的使用
    python操作mysql数据库
    python进程与线程的操作
    python selenium框架的Xpath定位元素
    在Ubuntu Server 12.04 x64下安装Graphite
    SQLCLR(一)入门
    DataSet操作
    ASP.NET传递中文参数乱码的解决方法
    c#.net常用函数和方法集
  • 原文地址:https://www.cnblogs.com/twodog/p/12139432.html
Copyright © 2011-2022 走看看