java script

페이지를 열면 포스트잇 형태로 열리는 작은 레이어 공지창입니다.

디자인인스 2011. 1. 7. 12:10

 4.png


<!---- [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>

<!--------------------------- 여기까지 ---------------------------->