parabola-js v1.0.3

🖥 Environment Support

📦 Install

npm install parabola-js

yarn add parabola-js

https://cdn.jsdelivr.net/npm/parabola-js@1.0.1/lib/parabola.js

参数

源自 zhangxinxu(.com) http://www.zhangxinxu.com/wordpress/?p=3855，做了些许更改

🔨 抛物线

import React, { Component, createRef } from 'react';
import Parabola from 'parabola-js'
import styles from './pjs.less';

class ParabolaDemo extends Component {
  constructor() {
    super();
    this.wrap = createRef();
    this.item1 = createRef();
    this.item2 = createRef();
  }

  handleClick = e => {
    const rect = this.wrap.current.getBoundingClientRect();
    const diffX = e.clientX - rect.left + this.wrap.current.scrollLeft;
    const diffY = e.clientY - rect.top + this.wrap.current.scrollLeft;
    this.item2.current.style.left = diffX + 'px';
    this.item2.current.style.top = diffY + 'px';
    
+   new Parabola(this.item1.current, this.item2.current).init()
  }

  render() {
    return (
      <div>
        抛物线测试
        <hr/>
        <div ref={this.wrap} className={styles.wrap} onClick={this.handleClick}>
          <div ref={this.item1} className={styles.item1} />
          <div ref={this.item2} className={styles.item2} />
        </div>
      </div>
    )
  }
}

export default ParabolaDemo;

🔨 购物车demo

by zhangxinxu(.com) https://www.zhangxinxu.com/study/201312/js-parabola-shopping.html

🔗 Links

• 抛物线 demo
• blog