웹마스터 팁
흐르는 내용 강좌
2003.02.10 11:21
<script language="JavaScript">
<!--
function namosw_init_marquee(layername1, layername2, dir, scrollamount, scrolldelay, behavior, loop, cliplen, length, height)
{
var layer1, layer2;
if (layername1 == '' || layername2 == '')
return;
if (document.all) {
layer1 = document.all[layername1];
if (!layer1) return;
layer2 = document.all[layername2];
if (dir == 'l' || dir == 'r') {
layer1.style.clip = 'rect(auto ' + cliplen + ' auto 0)';
layer1.style.pixelWidth = cliplen;
if (behavior == 's' || behavior == 'l')
layer2.style.pixelLeft = (dir == 'l') ? cliplen : -length;
else
layer2.style.pixelLeft = (dir == 'l') ? Math.max(0, -length+cliplen) : Math.min(0, -length+cliplen);
} else if (dir == 't' || dir == 'b') {
layer1.style.clip = 'rect(0 auto ' + cliplen + ' auto)';
layer1.style.pixelHeight = cliplen;
if (behavior == 's' || behavior == 'l')
layer2.style.pixelTop = (dir == 't') ? cliplen : -length;
else
layer2.style.pixelTop = (dir == 't') ? Math.max(0, -length+cliplen) : Math.min(0, -length+cliplen);
}
} else {
layer1 = document.layers[layername1];
if (!layer1) return;
layer2 = document.layers[layername1].document.layers[layername2];
if (dir == 'l' || dir == 'r') {
layer1.clip.width = cliplen;
layer1.clip.height = height;
if (behavior == 's' || behavior == 'l')
layer2.left = (dir == 'l') ? cliplen : -length;
else
layer2.left = (dir == 'l') ? Math.max(0, -length+cliplen) : Math.min(0, -length+cliplen);
} else if (dir == 't' || dir == 'b') {
layer1.clip.height = cliplen;
if (behavior == 's' || behavior == 'l')
layer2.top = (dir == 't') ? cliplen : -length;
else
layer2.top = (dir == 't') ? Math.max(0, -length+cliplen) : Math.min(0, -length+cliplen);
}
}
layer1.m_layer = layer2;
layer1.m_dir = dir;
layer1.m_amount = scrollamount;
layer1.m_delay = scrolldelay;
layer1.m_behavior = behavior;
layer1.m_loop = loop;
layer1.m_cliplen = cliplen;
layer1.m_length = length;
if (layer1.m_behavior == 'l') {
if (layer1.m_loop == -1)
layer1.m_loop = 1;
}
layer1.m_interval = setInterval("namosw_marquee_scroll('" + layername1 + "');", scrolldelay);
}
function namosw_marquee_scroll(layername)
{
// local function
// ------------------------
function get_left(l)
{
return (navigator.appName.indexOf('Netscape'+ ', 0) != -1) ? l.left : l.style.pixelLeft;
}
function set_left(l, value)
{
if (navigator.appName.indexOf('Netscape', 0) != -1)
l.left = value;
else
l.style.pixelLeft = value;
}
function get_top(l)
{
return (navigator.appName.indexOf('Netscape', 0) != -1) ? l.top : l.style.pixelTop;
}
function set_top(l, value)
{
if (navigator.appName.indexOf('Netscape', 0) != -1)
l.top = value;
else
l.style.pixelTop = value;
}
// ------------------------
var layer;
var layer2;
if (document.all) {
layer = document.all[layername];
} else {
layer = document.layers[layername];
}
layer2 = layer.m_layer;
if (layer.m_behavior == 's') { // scroll
if (layer.m_dir == 'l') {
if (get_left(layer2) >= -layer.m_length) {
set_left(layer2, get_left(layer2)-layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_left(layer2, layer.m_cliplen);
}
} else if (layer.m_dir == 'r') {
if (get_left(layer2) < layer.m_cliplen) {
set_left(layer2, get_left(layer2) + layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_left(layer2, -layer.m_length);
}
} else if (layer.m_dir == 't') {
if (get_top(layer2) >= -layer.m_length) {
set_top(layer2, get_top(layer2) - layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_top(layer2, layer.m_cliplen);
}
} else if (layer.m_dir == 'b') {
if (get_top(layer2) < layer.m_cliplen) {
set_top(layer2, get_top(layer2) + layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_top(layer2, -layer.m_length);
}
}
if (layer.m_loop == 0)
clearInterval(layer.m_interval);
} else if (layer.m_behavior == 'a') { // alternate
if (layer.m_dir == 'l') {
if (get_left(layer2) > Math.min(0, -layer.m_length+layer.m_cliplen)) {
set_left(layer2, get_left(layer2)-layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
layer.m_dir = 'r';
}
} else if (layer.m_dir == 'r') {
if (get_left(layer2) < Math.max(0, -layer.m_length+layer.m_cliplen)) {
set_left(layer2, get_left(layer2)+layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
layer.m_dir = 'l';
}
} else if (layer.m_dir == 't') {
if (get_top(layer2) > Math.min(0, -layer.m_length+layer.m_cliplen)) {
set_top(layer2, get_top(layer2) - layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
layer.m_dir = 'b';
}
} else if (layer.m_dir == 'b') {
if (get_top(layer2) < Math.max(0, -layer.m_length+layer.m_cliplen)) {
set_top(layer2, get_top(layer2)+layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
layer.m_dir = 't';
}
}
} else if (layer.m_behavior == 'l') { // slide
if (layer.m_dir == 'l') {
if (get_left(layer2) > 0) {
set_left(layer2, Math.max(0, get_left(layer2)-layer.m_amount));
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_left(layer2, layer.m_cliplen);
}
} else if (layer.m_dir == 'r') {
if (get_left(layer2)+layer.m_length < layer.m_cliplen) {
set_left(layer2, Math.min(get_left(layer2)+layer.m_amount, layer.m_cliplen-layer.m_length));
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_left(layer2, -layer.m_length);
}
} else if (layer.m_dir == 't') {
if (get_top(layer2) > 0) {
set_top(layer2, Math.max(0, get_top(layer2) - layer.m_amount));
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_top(layer2, layer.m_cliplen);
}
} else if (layer.m_dir == 'b') {
if (get_top(layer2)+layer.m_length < layer.m_cliplen) {
set_top(layer2, Math.min(get_top(layer2)+layer.m_amount, layer.m_cliplen-layer.m_length));
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_top(layer2, -layer.m_length);
}
}
if (layer.m_loop == 0)
clearInterval(layer.m_interval);
}
}
// -->
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" OnLoad="namosw_init_marquee('layer1'+ ', 'marqueechildlayer0', 't', 10, 100, 's', -1, 1800, 900, 900);">
<p> </p>
<div id="layer1" style="width:200px; height:900px; position:absolute; left:384px; top:1px; z-index:1;">
<div id="marqueechildlayer0" style="position:absolute; left:0; top:0; width:200; height:900;" namo_marquee>
행복을 줄수없었어 <BR>그런데 사랑을했어 <BR>니곁에 감히 머무른 <BR>내 욕심을 용서치마<BR>방황이 많이 남았어 <BR>그 끝은 나도
모르는곳<BR>약하게 태어나서 미안해 <BR>그래서 널 보내려고 해 <BR><BR>언젠가는 돌아갈께<BR>사랑할 자격 갖춘 나
되어<BR>너의곁으로 돌아갈께<BR>행복을 줄수있을때 <BR>아파도 안녕<BR>잠시만 안녕 <BR><BR><BR>언제나 위태로운 나<BR>그런
내가 널 사랑을했어 <BR>외로운 고독이 두려워<BR>빨리 못보내 미안해<BR>사는게 참 힘들었어<BR>널 보며 난 견뎠어<BR>허나 네겐
보여줄수 없는 내 사랑 <BR>이별로 널 지키려해 <BR><BR>언젠가는 돌아갈께<BR>흔들리지 않는 나 되어 <BR>늦지않게 돌아갈께<BR>널
많이 사랑하니까<BR>아파도 안녕<BR>슬퍼도 안녕<BR><BR><BR>언젠가는 돌아갈께<BR>사랑할 자격 갖춘 나 되어 <BR>너의 곁으로
돌아갈께<BR>행복을 줄수 있을때 <BR>아파도 안녕<BR>널위해 안녕 <BR><BR>너의 모두를 사랑하면<BR>우리가 정말 사랑한다면
<BR>언젠가는 만날꺼야<BR>행복을 줄수있을때 <BR>조금만 울자 <BR>잠시만 울자<BR>아파도 안녕 <BR>널위해 안녕
</div>
</div>
</body>
위의 소스는 무한대로 내용 흐르는 소스 입니다..
이 강좌는 레이어를 이용한 것이기 때문에..
레이어 사이즈를 줄일수 있습니다..
소스중 <div id="layer1" style="width:200px; height:900px; position:absolute; left:384px; top:1px; z-index:1;">
<div id="marqueechildlayer0" style="position:absolute; left:0; top:0; width:200; height:900;" namo_marquee>
이부분에서..
left:384px; top:1px; 가 레이어의 위치 입니다..
left는 왼쪽으로 얼마나 갖는냐 를 가리키는 것이고..
top는 높이 입니다..
width:200; height:900; 는 레이어의 사이즈 입니다..
width 는 양옆 사이즈고..
height 는 높이 사이즈 입니다..
그리고
<BR>그런데 사랑을했어 <BR>니곁에 감히 머무른 <BR>내 욕심을 용서치마<BR>방황이 많이 남았어 <BR>그 끝은 나도
모르는곳<BR>약하게 태어나서 미안해 <BR>그래서 널 보내려고 해 <BR><BR>언젠가는 돌아갈께<BR>사랑할 자격 갖춘 나
되어<BR>너의곁으로 돌아갈께<BR>행복을 줄수있을때 <BR>아파도 안녕<BR>잠시만 안녕 <BR><BR><BR>언제나 위태로운 나<BR>그런
내가 널 사랑을했어 <BR>외로운 고독이 두려워<BR>빨리 못보내 미안해<BR>사는게 참 힘들었어<BR>널 보며 난 견뎠어<BR>허나 네겐
보여줄수 없는 내 사랑 <BR>이별로 널 지키려해 <BR><BR>언젠가는 돌아갈께<BR>흔들리지 않는 나 되어 <BR>늦지않게 돌아갈께<BR>널
많이 사랑하니까<BR>아파도 안녕<BR>슬퍼도 안녕<BR><BR><BR>언젠가는 돌아갈께<BR>사랑할 자격 갖춘 나 되어 <BR>너의 곁으로
돌아갈께<BR>행복을 줄수 있을때 <BR>아파도 안녕<BR>널위해 안녕 <BR><BR>너의 모두를 사랑하면<BR>우리가 정말 사랑한다면
<BR>언젠가는 만날꺼야<BR>행복을 줄수있을때 <BR>조금만 울자 <BR>잠시만 울자<BR>아파도 안녕 <BR>널위해 안녕
이 부분은 흐르는 내용 입니다..
이부분은 다 삭제하시고 쓰시고 싶으신 내용을 써주시면 됩니다..
그럼이만..
↑의 자료는 제 사이트 웹피아에서 링크된 것입니다..
자료출처: http://webpia.ly.to
<!--
function namosw_init_marquee(layername1, layername2, dir, scrollamount, scrolldelay, behavior, loop, cliplen, length, height)
{
var layer1, layer2;
if (layername1 == '' || layername2 == '')
return;
if (document.all) {
layer1 = document.all[layername1];
if (!layer1) return;
layer2 = document.all[layername2];
if (dir == 'l' || dir == 'r') {
layer1.style.clip = 'rect(auto ' + cliplen + ' auto 0)';
layer1.style.pixelWidth = cliplen;
if (behavior == 's' || behavior == 'l')
layer2.style.pixelLeft = (dir == 'l') ? cliplen : -length;
else
layer2.style.pixelLeft = (dir == 'l') ? Math.max(0, -length+cliplen) : Math.min(0, -length+cliplen);
} else if (dir == 't' || dir == 'b') {
layer1.style.clip = 'rect(0 auto ' + cliplen + ' auto)';
layer1.style.pixelHeight = cliplen;
if (behavior == 's' || behavior == 'l')
layer2.style.pixelTop = (dir == 't') ? cliplen : -length;
else
layer2.style.pixelTop = (dir == 't') ? Math.max(0, -length+cliplen) : Math.min(0, -length+cliplen);
}
} else {
layer1 = document.layers[layername1];
if (!layer1) return;
layer2 = document.layers[layername1].document.layers[layername2];
if (dir == 'l' || dir == 'r') {
layer1.clip.width = cliplen;
layer1.clip.height = height;
if (behavior == 's' || behavior == 'l')
layer2.left = (dir == 'l') ? cliplen : -length;
else
layer2.left = (dir == 'l') ? Math.max(0, -length+cliplen) : Math.min(0, -length+cliplen);
} else if (dir == 't' || dir == 'b') {
layer1.clip.height = cliplen;
if (behavior == 's' || behavior == 'l')
layer2.top = (dir == 't') ? cliplen : -length;
else
layer2.top = (dir == 't') ? Math.max(0, -length+cliplen) : Math.min(0, -length+cliplen);
}
}
layer1.m_layer = layer2;
layer1.m_dir = dir;
layer1.m_amount = scrollamount;
layer1.m_delay = scrolldelay;
layer1.m_behavior = behavior;
layer1.m_loop = loop;
layer1.m_cliplen = cliplen;
layer1.m_length = length;
if (layer1.m_behavior == 'l') {
if (layer1.m_loop == -1)
layer1.m_loop = 1;
}
layer1.m_interval = setInterval("namosw_marquee_scroll('" + layername1 + "');", scrolldelay);
}
function namosw_marquee_scroll(layername)
{
// local function
// ------------------------
function get_left(l)
{
return (navigator.appName.indexOf('Netscape'+ ', 0) != -1) ? l.left : l.style.pixelLeft;
}
function set_left(l, value)
{
if (navigator.appName.indexOf('Netscape', 0) != -1)
l.left = value;
else
l.style.pixelLeft = value;
}
function get_top(l)
{
return (navigator.appName.indexOf('Netscape', 0) != -1) ? l.top : l.style.pixelTop;
}
function set_top(l, value)
{
if (navigator.appName.indexOf('Netscape', 0) != -1)
l.top = value;
else
l.style.pixelTop = value;
}
// ------------------------
var layer;
var layer2;
if (document.all) {
layer = document.all[layername];
} else {
layer = document.layers[layername];
}
layer2 = layer.m_layer;
if (layer.m_behavior == 's') { // scroll
if (layer.m_dir == 'l') {
if (get_left(layer2) >= -layer.m_length) {
set_left(layer2, get_left(layer2)-layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_left(layer2, layer.m_cliplen);
}
} else if (layer.m_dir == 'r') {
if (get_left(layer2) < layer.m_cliplen) {
set_left(layer2, get_left(layer2) + layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_left(layer2, -layer.m_length);
}
} else if (layer.m_dir == 't') {
if (get_top(layer2) >= -layer.m_length) {
set_top(layer2, get_top(layer2) - layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_top(layer2, layer.m_cliplen);
}
} else if (layer.m_dir == 'b') {
if (get_top(layer2) < layer.m_cliplen) {
set_top(layer2, get_top(layer2) + layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_top(layer2, -layer.m_length);
}
}
if (layer.m_loop == 0)
clearInterval(layer.m_interval);
} else if (layer.m_behavior == 'a') { // alternate
if (layer.m_dir == 'l') {
if (get_left(layer2) > Math.min(0, -layer.m_length+layer.m_cliplen)) {
set_left(layer2, get_left(layer2)-layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
layer.m_dir = 'r';
}
} else if (layer.m_dir == 'r') {
if (get_left(layer2) < Math.max(0, -layer.m_length+layer.m_cliplen)) {
set_left(layer2, get_left(layer2)+layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
layer.m_dir = 'l';
}
} else if (layer.m_dir == 't') {
if (get_top(layer2) > Math.min(0, -layer.m_length+layer.m_cliplen)) {
set_top(layer2, get_top(layer2) - layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
layer.m_dir = 'b';
}
} else if (layer.m_dir == 'b') {
if (get_top(layer2) < Math.max(0, -layer.m_length+layer.m_cliplen)) {
set_top(layer2, get_top(layer2)+layer.m_amount);
} else {
if (layer.m_loop > 0) layer.m_loop--;
layer.m_dir = 't';
}
}
} else if (layer.m_behavior == 'l') { // slide
if (layer.m_dir == 'l') {
if (get_left(layer2) > 0) {
set_left(layer2, Math.max(0, get_left(layer2)-layer.m_amount));
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_left(layer2, layer.m_cliplen);
}
} else if (layer.m_dir == 'r') {
if (get_left(layer2)+layer.m_length < layer.m_cliplen) {
set_left(layer2, Math.min(get_left(layer2)+layer.m_amount, layer.m_cliplen-layer.m_length));
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_left(layer2, -layer.m_length);
}
} else if (layer.m_dir == 't') {
if (get_top(layer2) > 0) {
set_top(layer2, Math.max(0, get_top(layer2) - layer.m_amount));
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_top(layer2, layer.m_cliplen);
}
} else if (layer.m_dir == 'b') {
if (get_top(layer2)+layer.m_length < layer.m_cliplen) {
set_top(layer2, Math.min(get_top(layer2)+layer.m_amount, layer.m_cliplen-layer.m_length));
} else {
if (layer.m_loop > 0) layer.m_loop--;
set_top(layer2, -layer.m_length);
}
}
if (layer.m_loop == 0)
clearInterval(layer.m_interval);
}
}
// -->
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" OnLoad="namosw_init_marquee('layer1'+ ', 'marqueechildlayer0', 't', 10, 100, 's', -1, 1800, 900, 900);">
<p> </p>
<div id="layer1" style="width:200px; height:900px; position:absolute; left:384px; top:1px; z-index:1;">
<div id="marqueechildlayer0" style="position:absolute; left:0; top:0; width:200; height:900;" namo_marquee>
행복을 줄수없었어 <BR>그런데 사랑을했어 <BR>니곁에 감히 머무른 <BR>내 욕심을 용서치마<BR>방황이 많이 남았어 <BR>그 끝은 나도
모르는곳<BR>약하게 태어나서 미안해 <BR>그래서 널 보내려고 해 <BR><BR>언젠가는 돌아갈께<BR>사랑할 자격 갖춘 나
되어<BR>너의곁으로 돌아갈께<BR>행복을 줄수있을때 <BR>아파도 안녕<BR>잠시만 안녕 <BR><BR><BR>언제나 위태로운 나<BR>그런
내가 널 사랑을했어 <BR>외로운 고독이 두려워<BR>빨리 못보내 미안해<BR>사는게 참 힘들었어<BR>널 보며 난 견뎠어<BR>허나 네겐
보여줄수 없는 내 사랑 <BR>이별로 널 지키려해 <BR><BR>언젠가는 돌아갈께<BR>흔들리지 않는 나 되어 <BR>늦지않게 돌아갈께<BR>널
많이 사랑하니까<BR>아파도 안녕<BR>슬퍼도 안녕<BR><BR><BR>언젠가는 돌아갈께<BR>사랑할 자격 갖춘 나 되어 <BR>너의 곁으로
돌아갈께<BR>행복을 줄수 있을때 <BR>아파도 안녕<BR>널위해 안녕 <BR><BR>너의 모두를 사랑하면<BR>우리가 정말 사랑한다면
<BR>언젠가는 만날꺼야<BR>행복을 줄수있을때 <BR>조금만 울자 <BR>잠시만 울자<BR>아파도 안녕 <BR>널위해 안녕
</div>
</div>
</body>
위의 소스는 무한대로 내용 흐르는 소스 입니다..
이 강좌는 레이어를 이용한 것이기 때문에..
레이어 사이즈를 줄일수 있습니다..
소스중 <div id="layer1" style="width:200px; height:900px; position:absolute; left:384px; top:1px; z-index:1;">
<div id="marqueechildlayer0" style="position:absolute; left:0; top:0; width:200; height:900;" namo_marquee>
이부분에서..
left:384px; top:1px; 가 레이어의 위치 입니다..
left는 왼쪽으로 얼마나 갖는냐 를 가리키는 것이고..
top는 높이 입니다..
width:200; height:900; 는 레이어의 사이즈 입니다..
width 는 양옆 사이즈고..
height 는 높이 사이즈 입니다..
그리고
<BR>그런데 사랑을했어 <BR>니곁에 감히 머무른 <BR>내 욕심을 용서치마<BR>방황이 많이 남았어 <BR>그 끝은 나도
모르는곳<BR>약하게 태어나서 미안해 <BR>그래서 널 보내려고 해 <BR><BR>언젠가는 돌아갈께<BR>사랑할 자격 갖춘 나
되어<BR>너의곁으로 돌아갈께<BR>행복을 줄수있을때 <BR>아파도 안녕<BR>잠시만 안녕 <BR><BR><BR>언제나 위태로운 나<BR>그런
내가 널 사랑을했어 <BR>외로운 고독이 두려워<BR>빨리 못보내 미안해<BR>사는게 참 힘들었어<BR>널 보며 난 견뎠어<BR>허나 네겐
보여줄수 없는 내 사랑 <BR>이별로 널 지키려해 <BR><BR>언젠가는 돌아갈께<BR>흔들리지 않는 나 되어 <BR>늦지않게 돌아갈께<BR>널
많이 사랑하니까<BR>아파도 안녕<BR>슬퍼도 안녕<BR><BR><BR>언젠가는 돌아갈께<BR>사랑할 자격 갖춘 나 되어 <BR>너의 곁으로
돌아갈께<BR>행복을 줄수 있을때 <BR>아파도 안녕<BR>널위해 안녕 <BR><BR>너의 모두를 사랑하면<BR>우리가 정말 사랑한다면
<BR>언젠가는 만날꺼야<BR>행복을 줄수있을때 <BR>조금만 울자 <BR>잠시만 울자<BR>아파도 안녕 <BR>널위해 안녕
이 부분은 흐르는 내용 입니다..
이부분은 다 삭제하시고 쓰시고 싶으신 내용을 써주시면 됩니다..
그럼이만..
↑의 자료는 제 사이트 웹피아에서 링크된 것입니다..
자료출처: http://webpia.ly.to
