如何隐藏屏幕尺寸上的元素? [英] 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>
推荐答案
您可以按照以下方式实现
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屋!