dom_lianxi

by ning wang

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>lianxi_0611</title>
</head>
<body>
</body>
</html>

CSS

.box{
        display:inline-block;
        width:100px;
        height:100px;
        margin: 10px;
        background-color: grey; 
    }

    body{
        margin:50px;
        counter-reset:num;
    }

    .box::after{
        counter-increment: num;
        content: counter(num);
        display:flex;
        height:100%;
        justify-content: center;
        align-items: center;
        color:#fff;
    }
    .box.active{
        background-color:skyblue;
    }

    .box:hover:active{
        opacity:.99;
        transition:opacity 1s;/**通过css过渡设置延时**/
    }

JavaScript

function Box(num){
                let _num = isNaN(num) ? 0 : num;
                //private _init method to initialize box
                let _init = function(size){
                    let _boxContainer = document.createDocumentFragment(); 
                    for(let i=0;i<size;i++){
                        let _box = document.createElement('div');
                        _box.className = 'box';
                        _box.draggable = false;
                        _boxContainer.appendChild(_box);
                    }
                    document.body.appendChild(_boxContainer);
                };
                _init(num);
                this.registerEvent.call(this);
            }
    
            Box.prototype = {
                currEvent: {
                    move: 'mousemove',
                    up: 'mouseup'
                },
                start: [],
                registerEvent: function(){
                    let _isCovered = (ev,el) => {
                        let _x = Math.min(this.start[0], ev.pageX),
                            _y = Math.min(this.start[1], ev.pageY),
                            _l = Math.max(this.start[0], ev.pageX),
                            _t = Math.max(this.start[1], ev.pageY),
                            $w = el.offsetWidth,
                            $h = el.offsetHeight,
                            $x = el.offsetLeft,
                            $y = el.offsetTop,
                            $l = $x + $w,
                            $t = $y + $h,
                            flg = false;
                        if ($l - $w < _l && $l > _x && $t - $h <= _t && $t >= _y) {
                            flg = true;
                        }
                        return flg;
                    };
                    let _handleMove = ((evt) => {
                        var evt = evt.touches&&evt.touches[0] || evt;
                        if (!this.start.length) {
                            this.start =...