Question

图像和图标（我没有与另一者结婚，不希望使用图标）未显示在以下位置的自定义动画计数器中：https://styleddigital.com/blog/2017/5/10/how-to-add-an-animated-counter-in-squarespace

（编辑：URL https://primrose-paddlefish-em77.squarespace.com）

在Squarespace的配置模式下禁用脚本时显示，但在实时版本上不显示。

我需要在代码中添加些什么以使图像出现？

我已尝试在div“计数器”中使用span标签。我尝试将图标更改为图像。我试过在div“计数器”之外的图像排列不整齐。

编辑：播放了更多之后，图标和图像会加载，但在滚动时会消失。我应该删除哪一部分，以使图像不会在滚动时消失？

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
   </script>
    <script>
    var a = 0;
$(window).scroll(function() {

  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
          }
        });
    });
    a = 1;
  }
});
</script>
<div id="counter">
    <div class="sqs-col sqs-col-2 counter-value" data-count="18" data-desc="Countries"><i style="opacity: 1;color:#3996cc" class="fa fa-globe-americas fa-1x"></i><br>0</div>
  <div class="sqs-col sqs-col-2 counter-value" data-count="41" data-desc="Cities"><img src="Notahighenoughreuptationtopostimages"><br>0</div>
  <div class="sqs-col sqs-col-2 counter-value" data-count="33" data-desc="Airports"><i style="opacity: 1;color:#3996cc" class="fa fa-plane-departure fa-1x"></i><br>0</div>
    <div class="sqs-col sqs-col-2 counter-value" data-count="200" data-desc="Brands"><i style="opacity: 1;color:#3996cc" class="fa fa-briefcase fa-1x"></i><br>0</div>
      <div class="sqs-col sqs-col-2 counter-value" data-count="1" data-desc="Billion in Construction"><i style="opacity: 1;color:#3996cc" class="fa fa-hard-hat fa-1x"></i><br>0</div>
        <div class="sqs-col sqs-col-2 counter-value" data-count="200" data-desc="Clients"><i style="opacity: 1;color:#3996cc" class="fa fa-handshake fa-1x"></i><br>0</div>
</div>


<style>
 .counter-value { 
    font-size: 60px;
   line-height:2em;
   text-align:center;
   padding:17px 0;
   height: 150px;
 }
  .counter-value:after {
   content: attr(data-desc);
    display:block;
    text-transform:uppercase;
    font-size: 14px;
    line-height:1.2em;
    height: 150px;  
  }
</style>

实际结果可使计数器按预期工作，但图像/图标未显示。没有创建错误消息。

为什么图像和图标没有显示在代码块中？

0 个答案: