cursor

by redky

HTML

<div id="box"></div>

<!-- 
    http://caniuse.com/#search=cursor 
-->

CSS

.item {
    display: inline-block;
    margin: 5px 10px;
    padding: 5px 10px;
    background-color: #414141;
    color: #fff;
    border-radius: 2px;
}

JavaScript

function init() {

var cursors = [
    'auto',
    'default',
    'none',
    'context-menu',
    'help',
    'pointer',
    'progress',
    'wait',
    'cell',
    'crossshair',
    'text',
    'vertical-text',
    'alias',
    'copy',
    'move',
    'no-drop',
    'not-allowed',
    'all-scroll',
    'col-resize',
    'row-resize',
    'n-resize',
    'e-resize',
    's-resize',
    'w-resize',
    'ne-resize',
    'nw-resize',
    'se-resize',
    'sw-resize',
    'ew-resize',
    'nesw-resize',
    'nwse-resize',
    'zoom-in',
    'zoom-out',
    'grab',
    'grabbing',
    'url(http://zhanhongtao.github.io/blog/ppt/images/css/cursor.png?t=1), auto',
    '-webkit-grabbing',
    '-moz-grabbing',
    '-webkit-grab',
    '-moz-grab'
];

var fragment = document.createDocumentFragment();
for (var i = 0, l = cursors.length; i < l; ++i) {
    var element = document.createElement('div');
    element.className = 'item';
    element.style.cssText = 'cursor: ' + cursors[i];
    element.innerHTML = cursors[i].replace(/\([^)]*?\)/, '(...)');
    fragment.appendChild(element);
}

document.getElementById('box').appendChild(fragment);
}

init();