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

学习js到了这里就可以开始尝试做一些小的项目了拖拽小方块HTML部分省去
js拖拽方块, js菜单栏
function getStyle(elem, prop, fakeNode) {
if(window.getComputedStyle){
return window.getComputedStyle

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

拖拽小方块

HTML部分省去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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部分省略, 思想如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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))
}
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!