parabola-js demo page

发表于2020-03-19|更新于2024-05-13|demo-page

|总字数:227|阅读时长:1分钟|浏览量:

抛物线测试

html

<body>
    <section class="wrap">
      <p>抛物线测试</p>
      <hr>
      <div class="box-1">
        <div class="r-item"></div>
        <div class="r-target"></div>
      </div>
    </section>
</body>   

<script src="https://cdn.jsdelivr.net/npm/parabola-js@1.0.1/lib/parabola.js"></script>

JavaScript

const box1 = document.querySelector('.box-1');
const rItem = document.querySelector('.r-item');
const rTarget = document.querySelector('.r-target');

// ie8+ 1
box1.addEventListener('click', e => {
const diffX = e.offsetX + box1.scrollLeft;
const diffY = e.offsetY + box1.scrollTop;
rTarget.style.left = diffX + 'px';
rTarget.style.top = diffY + 'px';
new Parabola(rItem, rTarget, {
  endScale: '0.3',
}).init();
})