不同屏幕大小引用不同的背景图

最新推荐文章于 2022-11-22 20:49:17 发布

喵_美

最新推荐文章于 2022-11-22 20:49:17 发布

阅读量456

点赞数

分类专栏： html 案例

本文链接：https://blog.csdn.net/qq_34708564/article/details/97548430

版权

html 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

案例

17 篇文章 0 订阅

订阅专栏

jQuery的data()方法

$element.data()是一个函数，专门用于取元素上的自定义属性（data-abc），函数的参数是我们要取得属性名称（abc）。

需求：

大屏幕的时候使用大图，图片高度不变图片内容居中；
小屏幕的时候使用小图，图片宽度100%自适应；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .text{
     background-repeat: no-repeat;
     background-position:center center;
     /*以下的是为了防止容器高度和图片高度不一致而导致出现空白的区域*/
     background-size:cover;
   }
    @media  (min-width: 768px){
      .text{
        height: 410px;
      }
    }
  </style>
</head>

<body>
 <div class="text" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg">

 </div>
</body>
<script src="jquery/jquery.js"></script>
<script>
  $(function() {
    function resize() {
      // 获取屏幕宽度
      var windowWidth = $(window).width();
      // 判断屏幕属于大还是小
      var isSmallScreen = windowWidth < 768;
      // 根据大小为界面上的每一张轮播图设置背景
      // $('#main_ad > .carousel-inner > .item') // 获取到的是一个DOM数组（多个元素）
      var $text = $('.text');
        // var imgSrc = $text.data(isSmallScreen ? 'image-xs' : 'image-lg');
        var imgSrc =isSmallScreen ? $text.data('image-xs') : $text.data('image-lg');
        // 设置背景图片
       $text.css('backgroundImage', 'url("' + imgSrc + '")');
        // 因为我们需要小图时 尺寸等比例变化，所以小图时我们使用img方式
        if (isSmallScreen) {
          $text.html('<img src="' + imgSrc + '" alt="" style="width: 100%"/>');
        } else {
          $text.empty();
        }
      };
    //初始化的时候调用一次
    $(window).on('resize', resize).trigger('resize');
  });
</script>
</html>

喵_美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不同屏幕大小引用不同的背景图

jQuery的data()方法$element.data()是一个函数，专门用于取元素上的自定义属性（data-abc），函数的参数是我们要取得属性名称（abc）。需求：大屏幕的时候使用大图，图片高度不变图片内容居中；小屏幕的时候使用小图，图片宽度100%自适应；<!DOCTYPE html><html lang="en"><head> &...
复制链接

扫一扫