Question

我正在开发一个函数，该函数应该使用类＆＃34; .dida＆＃34;每个帖子（Tumblr）并将它们附加到一个特定的地方（一个id为＃34;＃bottom-stripe＆＃34;的div），只有当帖子的图像（img with class＆＃34; .miniatura＆＃34; ）在视口中是50％。

我正在使用此外部库来检测视口上的元素： https://github.com/moagrius/isOnScreen

这是我的JS代码：

Italy

脚本将所有标题放在一起，并将它们全部附加到＃bottom-stripe div中。我希望它只在img.miniatura在视口中为50％时执行此操作。

有关哪里出错的任何建议？非常感谢你的帮助！

Answer 1

您似乎想要检测当前在视口中的图像。

$("img.miniatura").each(function() {
      if ($(this).isOnScreen(0.5, 0.5)) {
        var text = $(this).parents('div').find('.number').html();
        //Detect which image is in viewport
        $('#bottom-stripe').html(text);
      } 
});

我已在number类下添加图片文字，请参阅工作示例以检测当前的视图端口图像。

＆＃13;

// https://github.com/moagrius/isOnScreen
!function(t){t.fn.isOnScreen=function(o,e){(null==o||"undefined"==typeof o)&&(o=1),(null==e||"undefined"==typeof e)&&(e=1);var i=t(window),r={top:i.scrollTop(),left:i.scrollLeft()};r.right=r.left+i.width(),r.bottom=r.top+i.height();var f=this.outerHeight(),n=this.outerWidth();if(!n||!f)return!1;var h=this.offset();h.right=h.left+n,h.bottom=h.top+f;var l=!(r.right<h.left||r.left>h.right||r.bottom<h.top||r.top>h.bottom);if(!l)return!1;var m={top:Math.min(1,(h.bottom-r.top)/f),bottom:Math.min(1,(r.bottom-h.top)/f),left:Math.min(1,(h.right-r.left)/n),right:Math.min(1,(r.right-h.left)/n)};return m.left*m.right>=o&&m.top*m.bottom>=e}}(jQuery);

// show only captions related to visible images
$(window).on('load scroll', function(e) {
    $( "img.miniatura" ).each(function() {
      if ($(this).isOnScreen(0.5, 0.5)) {
        var text = $(this).parents('div').find('.number').html();
        //Detect which image is in viewport
        $('#bottom-stripe').html(text);
      } 
    });
});

＆＃13;

.info ul.tags {
  display: none;
}

#bottom-stripe {
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0px;
  left: 0px;
  background-color: #ddd;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="post">
  <div class="post-content">
    <div class="media">
      <a href="#">
          <img class="miniatura" src="https://placehold.it/350x300">
      </a>
      <div class="number">First Image</div>
      <div class="info">
        <ul class="tags">
          <li>FirstWord</li>
          <li>SecondWord</li>
          <li>ThirdWord</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="post">
  <div class="post-content">
    <div class="media">
      <a href="#">
          <img class="miniatura" src="https://placehold.it/350x300">
      </a>
      <div class="number">Second Image</div>
      <div class="info">
        <ul class="tags">
          <li>FirstWord</li>
          <li>SecondWord</li>
          <li>ThirdWord</li>
          <li>FourthWord</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="post">
  <div class="post-content">
    <div class="media">
      <a href="#">
          <img class="miniatura" src="https://placehold.it/350x300">
      </a>
      <div class="number">Third Image</div>
      <div class="info">
        <ul class="tags">
          <li>FirstWord</li>
          <li>SecondWord</li>
          <li>ThirdWord</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div id="bottom-stripe">test</div>

＆＃13;

使用isOnScreen将Check元素置于视口中

1 个答案: