抛物线测试


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