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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
function createProperty (div,option) {
var oInput = document.createElement("input");
oInput.type = "range";
var oSpan = document.createElement("span");
oSpan.innerText = option.prop +"+++"+ option.unit;
oInput.min = option.min;
oInput.max = option.max;
var oDiv = document.createElement("div");
var dataSpan = document.createElement("span");
oDiv.appendChild(oSpan);
oDiv.appendChild(oInput);
oDiv.appendChild(dataSpan);
oInput.oninput = function () {
console.log(this.value);
if(option.prop == "backgroundColor") {
div.style[option.prop] = 'hsl('+this.value+', 50%, 50%)';
}else{
div.style[option.prop] = this.value + option.unit;
}
dataSpan.innerText = this.value + option.unit;
}
oInput.onmousedown = handle;
oInput.onmousemove = handle;
oInput.onmouseup = handle;
function handle (e) {
e.stopPropagation();
}
return oDiv;
}
function changeProperty (div) {
var oDiv = document.createElement("div");
this.prop = {
width : {
prop : "width",
min : 0,
max : 1000,
unit : 'px'
},
width2 : {
prop : "width",
min : 0,
max : 200,
unit : '%'
},
height : {
prop : "height",
min : 0,
max : 1000,
unit : 'px'
},
height2 : {
prop : "height",
min : 0,
max : 200,
unit : '%'
},
fontSize : {
prop : "fontSize",
min : 0,
max : 100,
unit : 'px'
},
backgroundColor : {
prop : "backgroundColor",
min : 0,
max : 360,
unit : ''
}
}
for(var key in this.prop) {
oDiv.appendChild(createProperty(div,this.prop[key]));
}
// 来个定位
oDiv.style.position = "fixed";
oDiv.style.left = 0;
oDiv.style.top = 0;
// 来个拖拽
oDiv.onmousedown = function (e) {
var disX = e.clientX - this.offsetLeft;
var disY = e.clientY - this.offsetTop;
var self = this;
document.onmousemove = function (e) {
var x = e.clientX - disX;
var y = e.clientY - disY;
// 边界
x < 0 && (x = 0);
y < 0 && (y = 0);
x > (window.innerWidth - self.offsetWidth) && (x = window.innerWidth - self.offsetWidth);
y > (window.innerHeight - self.offsetHieght) && (y = window.innerHeight - self.offsetHieght);
// 移动渲染
self.style.left = x + 'px';
self.style.top = y + 'px';
}
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
}
}
document.body.appendChild(oDiv);
}
|
