代码之家 › 专栏 › 技术社区 › Meiji

Arctext插件代码只在单击[关闭]时工作一次

arctext.js html jquery

-1

Meiji · 技术社区 · 7 年前

<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

1 回复 | 直到 7 年前

Rory McCrossan Hsm Sharique Hasan 7 年前

你的第一个问题是你把这个类设置为 .mce-text .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>