id,clsass,style_-_위치정의_3가지방법.zip
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124 |
<!DOCTYPE html>
<html>
<head>
<title> id, class, style </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{margin:0;}
.imgContainerClass { position:absolute; overflow:hidden; left:100px; top:50px; width:600px; height:400px; }
.btnContainerClass { position:absolute; left:110px; top:70px; }
.absolute { position:absolute; }
.bgColor { background-color:#333333 }
.btn3 { position:absolute; left:400px; top:470px; }
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="imgContainer" class="imgContainerClass">
<img id="image0" src="images/image0.jpg" width="600" height="400" />
</div>
<div id="btnContainer" class="btnContainerClass">
<img id="box0" src="images/box0.png" width="73" height="36" />
<img id="box1" src="images/box1.png" width="73" height="36" />
<img id="box2" src="images/box2.png" width="73" height="36" />
<img id="box3" src="images/box3.png" width="73" height="36" />
<img id="box4" src="images/box4.png" width="73" height="36" />
</div>
<input type="button" value="btn1" id="btn1"/>
<input type="button" value="btn2" id="btn2"/>
<input type="button" value="btn3" class="btn3"/>
<input type="button" value="btn4" id="btn4" style="position:absolute; left:550px; top:470px;" />
<script>
$(document).ready(function(){
$('html, body').addClass("bgColor");
var boxClass = new BoxClass();
boxClass.init();
});
function BoxClass(){
this.name = "BoxClass";
this._isBool = false;
this._bgBool = false;
this._index = 0;
this._xPos = [0,500];
window.boxClass = this;
}
BoxClass.prototype.init = function(){
console.log(this.name);
this.build();
}
BoxClass.prototype.build = function(){
$("#btn1").click(function(){
console.log("btn1 clicked");
boxClass.boxHandler();
});
$("#btn2").click(function(){
console.log("btn2 clicked");
boxClass.boxHandler();
});
$(".btn3").click(function(){
console.log("btn3 clicked");
boxClass.bgHandler();
});
$("#btn4").click(function(){
console.log("btn4 clicked");
boxClass.bgHandler();
});
for (var i=0; i<5; ++i )
{
var btn = $("#box" + i);
btn.addClass("absolute");
btn.css({ "top":(36 + 10) * i });
}
}
var myBtn1 = $("#btn1");
myBtn1.css({"position":"absolute", "left":100, "top":470});
var myBtn2 = $("#btn2");
myBtn2.addClass("absolute");
myBtn2.css({"left":250, "top":470});
BoxClass.prototype.boxHandler = function(){
var index = this._index;
var xPos = this._xPos;
this._isBool = !this._isBool;
this._isBool? index = 1 : index = 0;
for (var i=0; i<5; ++i )
{
var box = $("#box" + i);
box.animate({left: xPos[index]},100*i + 300)
}
}
BoxClass.prototype.bgHandler = function(){
this._bgBool = !this._bgBool;
if(this._bgBool){
$("#image0").animate({opacity: 0.1},300);
}else{
$("#image0").animate({opacity: 1},300);
}
}
</script>
</body>
</html>
|
1_1. $("#id")의 css : 88번 라인처럼 직접 적어주는 방법
1_2. $("#id")의 css + style class : 91번 라인처럼 style class와 결합해서 css를 쓰는 법
1_3. $(".id")의 style class : 35번 처럼 클래스로 쓰고 14번 처럼 클래스로 연결
1_4. style tag : 36번 처럼 아예 태그로 넣는법
