HTML5 一款很棒的球形把手（旋钮）界面交互组件

Knob Input Component

h5, widget, component

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3048
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class KnobInput {
    constructor(containerElement, options) {
        if (!options) {
            options = {};
        }

// settings
        var step = options.step || 'any';
        var min = typeof options.min === 'number' ? options.min : 0;
        var max = typeof options.max === 'number' ? options.max : 1;
        this.initial = typeof options.initial === 'number' ? options.initial : 0.5 * (min + max);
        this.visualElementClass = options.visualElementClass || 'knob-input__visual';
        this.dragResistance = typeof options.dragResistance === 'number' ? options.dragResistance : 300;
        this.dragResistance /= max - min;
        this.wheelResistance = typeof options.wheelResistance === 'number' ? options.wheelResistance : 4000;
        this.wheelResistance /= max - min;
        this.setupVisualContext = typeof options.visualContext === 'function' ? options.visualContext : KnobInput.setupRotationContext(0, 360);
        this.updateVisuals = typeof options.updateVisuals === 'function' ? options.updateVisuals : KnobInput.rotationUpdateFunction;

// setup input
        var rangeInput = document.createElement('input');
        rangeInput.type = 'range';
        rangeInput.step = step;
        rangeInput.min = min;
        rangeInput.max = max;
        rangeInput.value = this.initial;
        containerElement.appendChild(rangeInput);

// elements
        this._container = containerElement;
        this._container.classList.add('knob-input');
        this._input = rangeInput;
        this._input.classList.add('knob-input__input');
        this._visualElement = this._container.querySelector(`.${this.visualElementClass}`);
        this._visualElement.classList.add('knob-input__visual');

// visual context
        this._visualContext = {
            element: this._visualElement
        };
        this.setupVisualContext.apply(this._visualContext);
        this.updateVisuals = this.updateVisuals.bind(this._visualContext);

// internals
        this._activeDrag = false;

// define event listeners
        // have to store bound versions of handlers so they can be removed later
        this._handlers = {
            inputChange: this.handleInputChange.bind(this),
            touchStart: this.handleTouchStart.bind(this),
            touchMove: this.handleTouchMove.bind(this),
            touchEnd: this.handleTouchEnd.bind(this),
            touchCancel: this.handleTouchCancel.bind(this),
            mouseDown: this.handleMouseDown.bind(this),
            mouseMove: this.handleMouseMove.bind(this),
            mouseUp: this.handleMouseUp.bind(this),
            mouseWheel: this.handleMouseWheel.bind(this),
            doubleClick: this.handleDoubleClick.bind(this),
            focus: this.handleFocus.bind(this),
            blur: this.handleBlur.bind(this),
        };
        // add listeners
        this._input.addEventListener('change', this._handlers.inputChange);
        this._input.addEventListener('touchstart', this._handlers.touchStart);
        this._input.addEventListener('mousedown', this._handlers.mouseDown);
        this._input.addEventListener('wheel', this._handlers.mouseWheel);
        this._input.addEventListener('dblclick', this._handlers.doubleClick);
        this._input.addEventListener('focus', this._handlers.focus);
        this._input.addEventListener('blur', this._handlers.blur);
        // init
        this.updateToInputValue();
    }

static setupRotationContext(minRotation, maxRotation) {
        return function() {
            this.minRotation = minRotation;
            this.maxRotation = maxRotation;
        };
    }

static rotationUpdateFunction(norm) {
        this.element.style[transformProp] = `rotate(${this.maxRotation*norm-this.minRotation*(norm-1)}deg)`;
    }

// handlers
    handleInputChange(evt) {
        // console.log('input change');
        this.updateToInputValue();
    }

handleTouchStart(evt) {
        // console.log('touch start');
        this.clearDrag();
        evt.preventDefault();
        var touch = evt.changedTouches.item(evt.changedTouches.length - 1);
        this._activeDrag = touch.identifier;
        this.startDrag(touch.clientY);
        // drag update/end listeners
        document.body.addEventListener('touchmove', this._handlers.touchMove);
        document.body.addEventListener('touchend', this._handlers.touchEnd);
        document.body.addEventListener('touchcancel', this._handlers.touchCancel);
    }

handleTouchMove(evt) {
        // console.log('touch move');
        var activeTouch = this.findActiveTouch(evt.changedTouches);
        if (activeTouch) {
            this.updateDrag(activeTouch.clientY);
        } else if (!this.findActiveTouch(evt.touches)) {
            this.clearDrag();
        }
    }

handleTouchEnd(evt) {
        // console.log('touch end');
        var activeTouch = this.findActiveTouch(evt.changedTouches);
        if (activeTouch) {
            this.finalizeDrag(activeTouch.clientY);
        }
    }

handleTouchCancel(evt) {
        // console.log('touch cancel');
        if (this.findActiveTouch(evt.changedTouches)) {
            this.clearDrag();
        }
    }

handleMouseDown(evt) {
        // console.log('mouse down');
        this.clearDrag();
        evt.preventDefault();
        this._activeDrag = true;
        this.startDrag(evt.clientY);
        // drag update/end listeners
        document.body.addEventListener('mousemove', this._handlers.mouseMove);
        document.body.addEventListener('mouseup', this._handlers.mouseUp);
    }

handleMouseMove(evt) {
        // console.log('mouse move');
        if (evt.buttons & 1) {
            this.updateDrag(evt.clientY);
        } else {
            this.finalizeDrag(evt.clientY);
        }
    }

handleMouseUp(evt) {
        // console.log('mouse up');
        this.finalizeDrag(evt.clientY);
    }

handleMouseWheel(evt) {
        // console.log('mouse wheel');
        this._input.focus();
        this.clearDrag();
        this._prevValue = parseFloat(this._input.value);
        this.updateFromDrag(evt.deltaY, this.wheelResistance);
    }

handleDoubleClick(evt) {
        // console.log('double click');
        this.clearDrag();
        this._input.value = this.initial;
        this.updateToInputValue();
    }

handleFocus(evt) {
        // console.log('focus on');
        this._container.classList.add('focus-active');
    }

handleBlur(evt) {
        // console.log('focus off');
        this._container.classList.remove('focus-active');
    }

// dragging
    startDrag(yPosition) {
        this._dragStartPosition = yPosition;
        this._prevValue = parseFloat(this._input.value);

this._input.focus();
        document.body.classList.add('knob-input__drag-active');
        this._container.classList.add('drag-active');
    }

updateDrag(yPosition) {
        var diff = yPosition - this._dragStartPosition;
        this.updateFromDrag(diff, this.dragResistance);
        this._input.dispatchEvent(new InputEvent('change'));
    }

finalizeDrag(yPosition) {
        var diff = yPosition - this._dragStartPosition;
        this.updateFromDrag(diff, this.dragResistance);
        this.clearDrag();
        this._input.dispatchEvent(new InputEvent('change'));
    }

clearDrag() {
        document.body.classList.remove('knob-input__drag-active');
        this._container.classList.remove('drag-active');
        this._activeDrag = false;
        this._input.dispatchEvent(new InputEvent('change'));
        // clean up event listeners
        document.body.removeEventListener('mousemove', this._handlers.mouseMove);
        document.body.removeEventListener('mouseup', this._handlers.mouseUp);
        document.body.removeEventListener('touchmove', this._handlers.touchMove);
        document.body.removeEventListener('touchend', this._handlers.touchEnd);
        document.body.removeEventListener('touchcancel', this._handlers.touchCancel);
    }

updateToInputValue() {
        var normVal = this.normalizeValue(parseFloat(this._input.value));
        this.updateVisuals(normVal);
    }

updateFromDrag(dragAmount, resistance) {
        var newVal = this.clampValue(this._prevValue - (dragAmount / resistance));
        this._input.value = newVal;
        this.updateVisuals(this.normalizeValue(newVal));
    }

// utils
    clampValue(val) {
        var min = parseFloat(this._input.min);
        var max = parseFloat(this._input.max);
        return Math.min(Math.max(val, min), max);
    }

normalizeValue(val) {
        var min = parseFloat(this._input.min);
        var max = parseFloat(this._input.max);
        return (val - min) / (max - min);
    }

findActiveTouch(touchList) {
        var i, len, touch;
        for (i = 0, len = touchList.length; i < len; i++)
            if (this._activeDrag === touchList.item(i).identifier)
                return touchList.item(i);
        return null;
    }

// public passthrough methods
    addEventListener() {
        this._input.addEventListener.apply(this._input, arguments);
    }
    removeEventListener() {
        this._input.removeEventListener.apply(this._input, arguments);
    }
    focus() {
        this._input.focus.apply(this._input, arguments);
    }
    blur() {
        this._input.blur.apply(this._input, arguments);
    }

// getters/setters
    get value() {
        return parseFloat(this._input.value);
    }
    set value(val) {
        this._input.value = val;
        this.updateToInputValue();
        this._input.dispatchEvent(new Event('change'));
    }
}

// Utils

function getSupportedPropertyName(properties) {
    for (var i = 0; i < properties.length; i++)
        if (typeof document.body.style[properties[i]] !== 'undefined')
            return properties[i];
    return null;
}

function getTransformProperty() {
    return getSupportedPropertyName([
        'transform', 'msTransform', 'webkitTransform', 'mozTransform', 'oTransform'
    ]);
}

// Demo Setup - Knobs

var transformProp = getTransformProperty();

// Demo Setup - Envelope Visualization

var container = document.querySelector('.envelope-visualizer');
var enveloperVisualizer = {
    container: container,
    shape: container.querySelector('.envelope-shape'),
    delay: container.querySelector('.delay'),
    attack: container.querySelector('.attack'),
    hold: container.querySelector('.hold'),
    decay: container.querySelector('.decay'),
    release: container.querySelector('.release'),
};

envelopeKnobs.concat(tensionKnobs)
    .forEach(knob => {
        knob.addEventListener('change', updateVisualization);
    });
updateVisualization();

编译

CSS

* {
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
}
body {
    padding: 1px;
    background: -webkit-radial-gradient(#1a1d22, #121318);
    background: radial-gradient(#1a1d22, #121318);
}
.defs {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}
.fl-studio-envelope {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    padding: 20px;
    overflow: hidden;
    background: #363c40;
    border: 2px solid #272d31;
    box-shadow: 0 10px 70px rgba(0, 0, 0, 0.6);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.fl-studio-envelope__visualizer {
    height: 200px;
    background: #21272b;
    border: 2px solid #191f23;
}
.fl-studio-envelope__visualizer .envelope-visualizer {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.fl-studio-envelope__controls,
.fl-studio-envelope__tension {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.fl-studio-envelope__controls {
    padding: 30px 0 0;
}
.fl-studio-envelope__control {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.fl-studio-envelope__label {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: inline-block;
    padding: 10px 0;
    width: 80px;
    color: #c1c5c5;
    font-size: 10px;
    font-family: 'Helvetica', sans-serif;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fl-studio-envelope__knob {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.fl-studio-envelope__knob.envelope-knob {
    width: 80px;
    height: 80px;
}
.fl-studio-envelope__knob.tension-knob {
    padding: 10px;
    width: 80px;
    height: 80px;
}
.fl-studio-envelope__knob .knob-input__visual {
    overflow: visible;
}
.fl-studio-envelope__knob .dial {
    -webkit-transform-origin: 20px 20px;
    transform-origin: 20px 20px;
    -webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.fl-studio-envelope__knob .dial-highlight {
    opacity: 0;
    -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.fl-studio-envelope__knob:hover .dial,
.fl-studio-envelope__knob.drag-active .dial {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-filter: brightness(10.2);
    filter: brightness(10.2);
    -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.fl-studio-envelope__knob:hover .dial-highlight,
.fl-studio-envelope__knob.drag-active .dial-highlight {
    opacity: 0.05;
}
.fl-studio-envelope__knob .focus-indicator {
    opacity: 0;
    -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.fl-studio-envelope__knob.focus-active .focus-indicator {
    opacity: 0.8;
}
.knob-input {
    position: relative;
}
.knob-input__visual {
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.knob-input__input {
    cursor: -webkit-grab;
    cursor: grab;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
body.knob-input__drag-active,
body.knob-input__drag-active * {
    cursor: -webkit-grabbing !important;
    cursor: grabbing !important;
}

HTML

Knob Input Component

h5, widget, component

编辑器支持Emmet

快捷键

Knob Input Component

h5, widget, component

HTML5一款很不错的响应式导航栏界面组件（Night Tabs）

HTML5 CSS3一组很棒的带晃动动画特效的单选按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：