如何隐藏屏幕尺寸上的元素? [英] How to hide elements on screen size?

问题描述

我正在使用

I'm using this plugin to swap my images on responsive for 3 screen are:

desktop，tablet和mobil

我与此插件一起使用了引导轮播.

and I'm using bootstrap carousel with this plugin together.

所以我有3个屏幕分辨率，我也想做一点具体说明.所以我想做的是:

so I have 3 screen resolution and I want to make a little specific too.So what I want to do is:

如下面的示例所示，我的设备属性具有3种分辨率:

As you can see below example I have 3 resolution for my devices attribute are:

data-large，data-medium，data-small.

我想检查一下我的屏幕尺寸:

and I want to check it my screen size:

如果我的屏幕大于0px，并且我的data-small属性为空 或未定义，然后显示下一张幻灯片(或隐藏自己)

if my screen bigger than 0px and if my data-small attribute is empty or undefined then show next slide (or hide yourself)

如果我的屏幕大于480px，并且我的data-medium属性是 空白或未定义，然后显示下一张幻灯片(或将其隐藏)

if my screen bigger than 480px and if my data-medium attribute is empty or undefined then show next slide (or hide it)

如果我的屏幕大于1024px，并且我的data-large属性是 空白或未定义，然后显示下一张幻灯片(或将其隐藏)

if my screen bigger than 1024px and if my data-large attribute is empty or undefined then show next slide (or hide it)

我要怎么做?

如果我没有移动设备的图像，我想隐藏它们，这就是我要问的原因.而我做不到.

if I have no images for mobile devices I want to hide them that's why I'm asking. and I couldn't do.

我的项目具有.active类，也许可以通过我尝试过的此类进行处理，但是我没有任何示例吗?

my items have .active class may be it can be handle with this class I tried but I got nothing any example?

! function(e) {
  e.fn.imageR = function(a) {
    function i(e, i, r, u, n) {
      $mediaQuery < a.large ? $mediaQuery < a.medium ? $mediaQuery < a.small || (n ? e.attr("src", i) : e.css("background-image", "url(" + i + ")")) : n ? e.attr("src", r) : e.css("background-image", "url(" + r + ")") : n ? e.attr("src", u) : e.css("background-image", "url(" + u + ")")
    }

    function r() {
      $imageR.each(function() {
        var e = jQuery(this),
          a = e.data("small"),
          r = e.data("medium"),
          u = e.data("large"),
          n = !1;
        (void 0 === r || null === r) && (r = u), (void 0 === a || null === a) && (a = r), e.is("img") && (n = !0), i(e, a, r, u, n)
      })
    }
    var u = {
      small: "0",
      medium: "480",
      large: "1024"
    };
    a = e.extend(u, a), $imageR = jQuery(this), $mediaQuery = jQuery(window).width(), r(), jQuery(window).on("resize", function() {
      $mediaQuery = jQuery(window).width(), r()
    })
  }
}(jQuery);
$(document).ready(function() {
  $(".lazy_banner").imageR({
    small: "0",
    medium: "480",
    large: "1024"
  });
  lazyBanner();
});

function lazyBanner() {
  var s = $(window).width();
  if (s > 1024) {
    $.each($(".active img"), function() {
      var lgData = $(this).data('large');
      if (lgData == "" || lgData == undefined) {
        $('#myCarousel').carousel('next');
      }
    })
  } else if (s > 480) {
    $.each($(".active img"), function() {
      var mdData = $(this).data('medium');
      if (mdData == "" || mdData == undefined) {
        $('#myCarousel').carousel('next');
      }
    })
  } else if (s > 0) {
    $.each($(".active img"), function() {
      var smData = $(this).data('small');
      if (smData == "" || smData == undefined) {
        $('#myCarousel').carousel('next');
      }
    })
  }
}

$(window).on('resize load', function() {
  lazyBanner();
});

.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
  width: 100%;
  height: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img class="lazy_banner" data-large="https://image.ibb.co/dh3MSk/desktop_1.jpg" data-medium="" data-small="https://image.ibb.co/bVYc05/mobil.jpg">
      </div>
      <div class="item">
        <img class="lazy_banner" data-large="https://images.pexels.com/photos/40797/wild-flowers-flowers-plant-macro-40797.jpeg" data-medium="https://images.pexels.com/photos/30865/pexels-photo-30865.jpg" data-small="https://images.pexels.com/photos/122429/leaf-nature-green-spring-122429.jpeg">
      </div>

      <div class="item">
        <img class="lazy_banner" data-large="" data-medium="https://www.jssor.com/demos/img/gallery/980x380/013.jpg" data-small="https://www.jssor.com/demos/img/gallery/980x380/015.jpg">
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

CodePen演示

推荐答案

您可以按照以下方式实现

You can implement like following

 $( window ).resize(function() {
         if($(window).width() < 600) { // set desired width condition
             $.each($(".carousel-inner img"), function(){
                   if($(this).attr("data-small") == "")
                      $(this).fadeOut("slow");
             })
         }
    });

这篇关于如何隐藏屏幕尺寸上的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！