点击一次

Question

我正在使用Arctext jQuery插件在div之一中弯曲文本。该代码工作正常，但仅在我必须刷新页面以使其再次工作时才有效。我不知道真正的问题在哪里。

<script src="arctext/js/jquery.arctext.js"></script>
<button class="mce-text">Curve</button>
<div class="shape ui-resizable" style="width:100px; height:100px" data-active="me">
  <div class="cut">&times;</div>
  <span class="show-cont" style="line-height: 1;"></span>
</div>

$(document).on('click', '.mce-txt', function() {
  var show = $('.shape[data-active=me]');

  show.children('.show-cont').arctext({
    radius: 270,
    dir: -1,
    rotate: true,
    animation: {
      speed: 300
    }
  });
});

更新： 这是逻辑

http://prntscr.com/mbz705

Answer 1

您遇到的第一个问题是，您在HTML中将类设置为.mce-text，但在jQuery选择器中却使用了.mce-txt。

此外，逻辑不正确。 Arctext库要求您使用默认状态在元素上初始化库。然后，要在按钮上单击以对其进行动画处理，您需要使用set选项以及详细说明要进行动画处理的新设置的对象再次调用该库。试试这个：

// set initial state
var $show = $('.shape[data-active=me]').arctext({
  radius: 300
});

// change state on button click
$(document).on('click', '.mce-text', function() {
  $show.arctext('set', {
    radius: 270,
    dir: -1,
    animation: {
      speed: 300
    }
  });
});

.shape {
  margin-top: 100px;
  width: 300px;
  height: 100px;
}

.show-cont {
  line-height: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>

<button class="mce-text">Curve</button>

<div class="shape ui-resizable" data-active="me">
  <div class="cut">Lorem ipsum dolor sit amet</div>
  <span class="show-cont"></span>
</div>