抛物线测试

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();
    })