레이어를 이용한 움직이는 공지

방송

연예인/스타

스포츠

스포츠

게임

게임게시판

디지털

여행/풍경

여행/풍경

자동차

국산차

정치/사회

라이프

생물/자연

기타 갤러리

javascript

javascript 팁이 있는 곳입니다.

jquery | Vue.js

글 수 109

2004.03.08 00:01:31 댓글 바로가기

조회 수 : 6650 신고 : 0

작성자 :

빽짱구

포인트 : 56933 | 레벨 : 25

https://web.webmini.net/javascript/14340

미리보기 :

http://backzzanggu.intelnet.co.kr/study/move.htm<html>

<head>

<title>빽짱구홈 움직이는 알림장</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=euc-kr">

<META NAME="Generator" CONTENT="EditPlus">

<style type='text/css'>

body { background-color:#696969; font-family:돋움,돋움체; color: #d5d5d5; font-size: 10pt }

.drag{position:relative;cursor:hand;}

#scontentmain{position:absolute;width:200px;}

#scontentbar{cursor:move;position:absolute;background-color:#c8c8c8;height:15;width:100%;top:0;}

#scontentsub{position:absolute;width:100%;top:15;background-color:#696969;border:1px solid #c8c8c8;}

</style>

<script language="JavaScript">

var dragapproved=false
var zcor,xcor,ycor
function movescontentmain(){
if (event.button==1&&dragapproved){
zcor.style.pixelLeft=tempvar1+event.clientX-xcor
zcor.style.pixelTop=tempvar2+event.clientY-ycor
leftpos=document.all.scontentmain.style.pixelLeft-document.body.scrollLeft
toppos=document.all.scontentmain.style.pixelTop-document.body.scrollTop
return false
}
}
function dragscontentmain(){
if (!document.all)
return
if (event.srcElement.id=="scontentbar"){
dragapproved=true
zcor=scontentmain
tempvar1=zcor.style.pixelLeft
tempvar2=zcor.style.pixelTop
xcor=event.clientX
ycor=event.clientY
document.onmousemove=movescontentmain
}
}
document.onmousedown=dragscontentmain
document.onmouseup=new Function("dragapproved=false")

</script>

</head>

<body topmargin=50>

<p align=center>

안내창을 움직여 놓으시고 스크롤을 움직여 보세요!

<div id="scontentmain">
<div id="scontentbar" ><font style="font-size:10pt;color:#696969" onClick="onoffdisplay()" style="cursor:hand;">『 안내창 줄이기 』</font></div>
<div id="scontentsub">

<table border=0 cellpadding="10" cellspacing="0" width="100%">
<tr>
<td>
<font style="font-size:9pt">
안내창 상단을 누르시고 <br>
아무곳에나 가져다 놓으시고 <br>
스크롤 바를 움직여 보세요 <br>
스크롤이 움직여도 <br>
안내창은 늘 그 자리에... <br>
</font>
</td>
</tr>
</table>

</div>
</div>
</div>

<script language="JavaScript">

var w=document.body.clientWidth-550
var h=150

w+=document.body.scrollLeft
h+=document.body.scrollTop

var leftpos=w
var toppos=h
scontentmain.style.left=w
scontentmain.style.top=h

function onoffdisplay(){
if (scontentsub.style.display=='')
scontentsub.style.display='none'
else
scontentsub.style.display=''
}

function staticize(){
w2=document.body.scrollLeft+leftpos
h2=document.body.scrollTop+toppos
scontentmain.style.left=w2
scontentmain.style.top=h2
}
window.onscroll=staticize

</script>

<script language="JavaScript">

function highlight(x){
document.forms[x].elements[0].focus()
document.forms[x].elements[0].select()
}

</script>

<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>

</body>

미리보기 ==> http://backzzanggu.intelnet.co.kr/study/move.htm
출처: 술도넷

</html>