原生js小项目---拖拽小方块--- js菜单栏

学习js到了这里就可以开始尝试做一些小的项目了

拖拽小方块

HTML部分省去

function getStyle(elem, prop, fakeNode) {
    if(window.getComputedStyle){
        return window.getComputedStyle(elem, fakeNode)[prop];
    }else{//低版本IE
        return elem.currentStyle[prop];
    }
}


function drag(elem) {
    addEvent(elem, 'mouseDown', function(e) {
        var disX,
            disY,
            event = e || window.event;
        disX = event.clientX - parseInt(getStyle(elem, 'left'));
        disY = event.clientY - parseInt(getStyle(elem, 'top'));
        addEvent(document, 'mousemove', mouseMove);
        addEvent(document, 'mouseup', mouseUp);
        function mouseMove(e) {
            var event = e || window.event;
            removeEvent(document, 'mousemove', mouseMove);
            removeEvent(document, 'mouseup', mouseUp);
        }
        function mouseMove(e) {
            var event = e || window.event;
            elem.style.left = event.clientX - disX + "px";
            elem.style.top = event.clientY - disY + "px";       
        }
        event.preventDefault();
        event.stopPropagation();
    })
}

---

js菜单栏

HTML部分省略, 思想如下代码

var wrapper = document.getElementsByClassName('wrapper')[0];
var btn = wrapper.getElementsByTagName('button');
var div = wrapper.getElementsByTagName('div');

for(var i = 0; i < btn.length; i++){
    (function(n) {
        btn[n].onclick = function() {
            for(var i = 0; i < btn.length; i++){
                btn[i].className = "";
                div[j].style.display = "none";
            }
            this.className = "active";
            div[n].style.display = "block";
        }
    }(i))
}