<!---- [1단계] 아래의 스타일시트를 HEAD 부분에 복사 해 넣으세요 ----->
1.
<style>
2.
/*r공지창의 모양을 설정하는 곳입니다*/
3.
<!--
4.
body,td{
font-size
:
12px
}
5.
#postit{
position
:
absolute
;
width
:
250
;
padding
:
5px
;
background-color
:lightyellow;
border
:
1px
solid
black
;
visibility
:
hidden
;
z-index
:
100
;
cursor
:hand;}
6.
-->
7.
</style>
</head>
<body>
<!---- [2단계] 아래와 같은 방법으로 태그와 코드를 복사 해 넣으세요 --->
01.
<!--///////////////////////// 내용 입력 부분입니다 ///////////////////////////-->
02.
<
div
id
=
"postit"
style
=
"left:150px;top:150px"
>
03.
<!------- 위에서 공지창의 위치를 설정 하세요 -------->
04.
<
div
align
=
"right"
><
b
><
a
href
=
"javascript:closeit("
>[닫기]</
a
></
b
></
div
>
05.
06.
<
b
>포스트잇 스크립트</
b
><
br
>
07.
<
p
>페이지를 열면 작은 공지창 처럼 뜨는 포스트잇 스크립트 입니다<
br
>
08.
마우스로 원하는 위치에 끌어 놓을 수 있답니다</
p
>
09.
<
p
>이 공지창은 브라우저를 열때마다 뜨게 할 수도 있고, 한번만 열리게 할 수도 있습니다</
p
>
10.
<
p
>자바스크립트 소스뱅크 <
a
href
=
"http://www.jasko.co.kr"
>자스코</
a
></
p
>
11.
</
div
>
12.
13.
<!--///////////////////////// 내용 입력 부분입니다 ///////////////////////////-->
01.
<script>
02.
03.
// 브라우저세션당 한번씩만 열리게 하려면 1로, 매번 열리게 하려면 0 으로 설정 하세요
04.
var
once_per_browser=1;
05.
06.
var
ns4=document.layers
07.
var
ie4=document.all
08.
var
ns6=document.getElementById&&!document.all
09.
10.
if
(ns4)
11.
crossobj=document.layers.postit
12.
else
if
(ie4||ns6)
13.
crossobj=ns6? document.getElementById(
"postit"
) : document.all.postit
14.
15.
16.
function
closeit(){
17.
if
(ie4||ns6)
18.
crossobj.style.visibility=
"hidden"
19.
else
if
(ns4)
20.
crossobj.visibility=
"hide"
21.
}
22.
23.
function
get_cookie(Name) {
24.
var
search = Name +
"="
25.
var
returnvalue =
""
;
26.
if
(document.cookie.
length
> 0) {
27.
offset
= document.cookie.indexOf(search)
28.
if
(
offset
!= -1) {
29.
offset
+= search.
length
30.
end
= document.cookie.indexOf(
";"
,
offset
);
31.
if
(
end
== -1)
32.
end
= document.cookie.
length
;
33.
returnvalue=unescape(document.cookie.substring(
offset
,
end
))
34.
}
35.
}
36.
return
returnvalue;
37.
}
38.
39.
function
showornot(){
40.
if
(get_cookie(
'postdisplay'
)==
''
){
41.
showit()
42.
document.cookie=
"postdisplay=yes"
43.
}
44.
}
45.
46.
function
showit(){
47.
if
(ie4||ns6)
48.
crossobj.style.visibility=
"visible"
49.
else
if
(ns4)
50.
crossobj.visibility=
"show"
51.
}
52.
53.
if
(once_per_browser)
54.
showornot()
55.
else
56.
showit()
57.
58.
</script>
59.
60.
<script language=
"JavaScript1.2"
>
61.
62.
// 드래그 앤 드롭 함수입니다
63.
// ie4 이상에서만 지원됩니다
64.
65.
function
drag_drop(e){
66.
if
(ie4&&dragapproved){
67.
crossobj.style.left=tempx+event.clientX-offsetx
68.
crossobj.style.top=tempy+event.clientY-offsety
69.
return
false
70.
}
71.
else
if
(ns6&&dragapproved){
72.
crossobj.style.left=tempx+e.clientX-offsetx
73.
crossobj.style.top=tempy+e.clientY-offsety
74.
return
false
75.
}
76.
}
77.
78.
function
initializedrag(e){
79.
if
(ie4&&event.srcElement.id==
"postit"
||ns6&&e.target.id==
"postit"
){
80.
offsetx=ie4? event.clientX : e.clientX
81.
offsety=ie4? event.clientY : e.clientY
82.
83.
tempx=parseInt(crossobj.style.left)
84.
tempy=parseInt(crossobj.style.top)
85.
86.
dragapproved=
true
87.
document.onmousemove=drag_drop
88.
}
89.
}
90.
document.onmousedown=initializedrag
91.
document.onmouseup=
new
Function(
"dragapproved=false"
)
92.
93.
</script>
<!--------------------------- 여기까지 ---------------------------->
'java script' 카테고리의 다른 글
실시간 디지털 시계 만들기 스크립트 (0) | 2011.01.07 |
---|---|
기념일 메세지와 함께 날짜 보여주기 (0) | 2011.01.07 |
상태바에 한글자씩 나타난후 스크롤되어 사라집니다 (0) | 2011.01.07 |
줄맞춰 춤추는 메세지들 (0) | 2011.01.07 |
네츠케이프에서는 반짝반짝, 익스플로러에서는 마키효과 (0) | 2011.01.07 |