Question

我使用jQuery创建了一个库，我希望这只适用于完整视图。当浏览器更改为平板电脑或移动设备时，我希望jQuery画廊停止播放，我只希望画廊中的图像显示，平板电脑的大小为2，移动设备的大小相同，为4英寸浏览器视图 - 在图像之上我想要产品的标题。

示例：

</* GALLERY JQUERY */

$(".galleryItem").mouseenter(function() {
var thisoverlay = $(this).find('.galleryOverlay');

thisoverlay.stop(true, true).animate({
height: '200',
marginTop: '-220px'
});
});

$(".galleryItem").mouseleave(function() {
 var thisoverlay = $(this).find('.galleryOverlay');

thisoverlay.stop(true, true).animate({
  height: '30',
  marginTop: '-50px'
 });
});

/* CSS */ 

.wrapper {
 width: 940px;
height: auto;
padding: 10px;
 margin-right: auto;
 margin-left: auto;
 margin-bottom: 20px;
 margin-top: 0px;
 background: #ffffff;
}

.galleryItem {
  float: left;
  width: 300px;
height: 300px;
 margin-left: 10px;
 overflow: hidden;
 cursor: pointer;
}

.galleryItem:first-child {
 margin-left: 0;
}

.Image {
  width: 300px;
height: 300px;
font-size: 60px;
font-weight: 800;
 text-align: center;
text-transform: uppercase;
 line-height: 280px;
 color: rgba(0, 0, 0, 0.2);
 background: #FFF;
}

.red img{
  width: 80%;
 height: 80%;

}

.green img{
  width: 80%;
 height: 80%;

}

.blue img{
  width: 80%;
  height: 80%;

}

.galleryOverlay {
  position: absolute;
  width: 280px;
  height: 30px;
  padding: 10px;
  margin-top: -50px;
  color: #666;
 background: #FFF;
 overflow: hidden;
 z-index: 10;

 -webkit-box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.5);
 box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.5);
}

.galleryItemTitel {
 display: block;
 height: 40px;
 font-size: 22px;
line-height: 30px;
 color: #000;
}

.clear {
 clear: both;
}

/* HTML */

<div class="wrapper">
<div class="galleryItem">
<div class="fakeImage red">
<img src="images/1.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Detroit Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="galleryItem">
<div class="fakeImage blue">
<img src="images/2.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Sheffield Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="galleryItem">
<div class="fakeImage green">
<img src="images/3.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Chore Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="clear"></div>
</div>

<div class="wrapper">
<div class="galleryItem">
<div class="fakeImage red">
   <img src="images/5.jpg">
</div>
<div class="galleryOverlay">
  <h2 class="galleryItemTitel">Camo Jacket</h2>
  <p class="galleryItemIntro">Material: Cotton</p>
    <p>Price: AUD $599.99</p>
    <p>Sizes: XS S M L XL</p>
</div>
</div>

 <div class="galleryItem">
   <div class="fakeImage blue">
  <img src="images/6.jpg">
   </div>
   <div class="galleryOverlay">
    <h2 class="galleryItemTitel">Pender Jacket</h2>
  <p class="galleryItemIntro">Material: Cotton</p>
    <p>Price: AUD $599.99</p>
    <p>Sizes: XS S M L XL</p>
</div>

 </div>
 <div class="galleryItem">
 <div class="fakeImage green">
   <img src="images/4.jpg">
</div>
    <div class="galleryOverlay">
  <h2 class="galleryItemTitel">Ranger Jacket</h2>
  <p class="galleryItemIntro">Material: Cotton</p>
    <p>Price: AUD $599.99</p>
    <p>Sizes: XS S M L XL</p>
</div>
</div>
<div class="clear"></div>

<div class="wrapper">
<div class="galleryItem">
<div class="fakeImage red">
<img src="images/7.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Sail Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="galleryItem">
<div class="fakeImage blue">
<img src="images/8.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Sheffield Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="galleryItem">
<div class="fakeImage green">
<img src="images/9.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Roy Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="clear"></div>
</div>

Answer 1

您可以使用下面的noop method：

var your_func = function(){
//wrap your gallery function here
};

//run your function
your_func();

//now you want to stop the function from running when resized
$(window).on('resize', function(){
  your_func = $.noop();
});

或者，如果你想做屏幕尺寸，那么这样做：

if($(window).width() <= 1067){
  your_func = $.noop();
}

Answer 2

此代码查找设备类型。在代码中放置一个If语句，如果$ .drowser.device不等于其中一个只是停止执行。

  $.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

Answer 3

$(document).ready(function(){
   $(window).resize(function() {
      if ($(window).width() <= 320) {
         // Leave empty
      }
      else {
        $(".galleryItem").mouseenter(function() {
        var thisoverlay = $(this).find('.galleryOverlay');

        thisoverlay.stop(true, true).animate({
        height: '200',
        marginTop: '-220px'
        });
        });

        $(".galleryItem").mouseleave(function() {
         var thisoverlay = $(this).find('.galleryOverlay');

        thisoverlay.stop(true, true).animate({
          height: '30',
          marginTop: '-50px'
         });
        });
      }
   });
});

Answer 4

关于窗口宽度问题，您可以使用此功能在必要时检测窗口宽度（例如$（window）.on（＆＃39; resize＆＃39;）或$（document）.on（＆＃ 39;准备好＆＃39;））：

var isLowerThan = function(lower_than_width){
var $window = $(window);
return ($window.width() < lower_than_width);
}

Demo

由于您似乎对每个设备类的不同视图感兴趣，您应该考虑使用基本的grid system provided by Bootstrap framework。它具有四种不同的视口宽度，您可以相应地调整标记。

如何在屏幕大小改变时停止运行jQuery？

4 个答案: