HTML5 SVG可在线定制面部表情的万圣节南瓜

可以通过拖拉人脸部件（眉毛、鼻子、眼睛和嘴巴）来构造南瓜的面部。

h5, svg, pumpkin

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

(function dragndrop() {
    let xpos = '';
    let ypos = '';
    let whichArt = '';

function resetZ() {
        const imgEl = document.querySelectorAll('img');
        for (let i = imgEl.length - 1; i >= 0; i--) {
            imgEl[i].style.zIndex = 5;
        }
    }

function moveStart(e) {
        whichArt = e.target;
        xpos = e.offsetX === undefined ? e.layerX : e.offsetX;
        ypos = e.offsetY === undefined ? e.layerY : e.offsetY;
        whichArt.style.zIndex = 10;
    }

function moveDragOver(e) {
        e.preventDefault();
    }

function moveDrop(e) {
        e.preventDefault();
        whichArt.style.left = e.pageX - xpos + 'px';
        whichArt.style.top = e.pageY - ypos + 'px';
    }

function touchStart(e) {
        e.preventDefault();
        const whichArt = e.target;
        const touch = e.touches[0];
        let moveOffsetX = whichArt.offsetLeft - touch.pageX;
        let moveOffsetY = whichArt.offsetTop - touch.pageY;
        resetZ();
        whichArt.style.zIndex = 10;

whichArt.addEventListener('touchmove', function() {
            let posX = touch.pageX + moveOffsetX;
            let posY = touch.pageY + moveOffsetY;
            whichArt.style.left = posX + 'px';
            whichArt.style.top = posY + 'px';
        }, false);
    }

document.querySelector('body').addEventListener('dragstart', moveStart, false);
    document.querySelector('body').addEventListener('dragover', moveDragOver, false);
    document.querySelector('body').addEventListener('drop', moveDrop, false);

document.querySelector('body').addEventListener('touchstart', touchStart, false);

})();

编译

CSS

HTML

<p>Drag and drop different features to decorate the pumpkin</p>

可以通过拖拉人脸部件（眉毛、鼻子、眼睛和嘴巴）来构造南瓜的面部。

h5, svg, pumpkin

编辑器支持Emmet

快捷键

可以通过拖拉人脸部件（眉毛、鼻子、眼睛和嘴巴）来构造南瓜的面部。

h5, svg, pumpkin

使用HTML5实现的表情工厂 - 在线制作表情图标

HTML5 SVG很棒的幽灵小丑可拖动互换魔法门

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：