css摇杆,nippleJS: nippleJS 是一个 JavaScript 库，用来创建虚拟摇杆触摸功能的接口...

A vanilla virtual joystick for touch capable interfaces

Table Of Contents

Install

npm installnipplejs --save

Demo

Check out the demo here.

Usage

Import it the way you want into your project :

// CommonJS

var manager = require('nipplejs').create(options);

// AMD

define(['nipplejs'], function (nipplejs) {

var manager = nipplejs.create(options);

});

// Module

import nipplejs from 'nipplejs';

var manager = nipplejs.create(options);

NB

Your joystick's container has to have its CSS position property set, either absolute, relative, static, ....

Options

You can configure your joystick in different ways :

var options = {

zone: Element, // active zone

color: String,

size: Integer,

threshold: Float, // before triggering a directional event

fadeTime: Integer, // transition time

multitouch: Boolean,

maxNumberOfNipples: Number, // when multitouch, what is too many?

dataOnly: Boolean, // no dom element whatsoever

position: Object, // preset position for 'static' mode

mode: String, // 'dynamic', 'static' or 'semi'

restJoystick: Boolean|Object, // Re-center joystick on rest state

restOpacity: Number, // opacity when not 'dynamic' and rested

lockX: Boolean, // only move on the X axis

lockY: Boolean, // only move on the Y axis

catchDistance: Number, // distance to recycle previous joystick in

// 'semi' mode

shape: String, // 'circle' or 'square'

dynamicPage: Boolean, // Enable if the page has dynamically visible elements

follow: Boolean, // Makes the joystick follow the thumbstick

};

All options are optional

.

options.zone defaults to 'body'

The dom element in which all your joysticks will be injected.

var options = {

zone: document.getElementById('zone_joystick'),

};

var manager = nipplejs.create(options);

This zone also serve as the mouse/touch events handler.

It represents the zone where all your joysticks will be active.

options.color default