웹마스터 팁

  2. Support
  3. 웹마스터 팁

Marquee 태그를 이용한 간단한 스크립트

2003.08.06 23:00

뒹굴리스트

관리자인데도 불구하고 글 많이 못 올려 민망할 따름입니다-_-;;;

이번 소스는 그냥 심심하던차에 만들게 된 것입니다(-_-;)

응용하시면 괜찮은 무언가(?)가 나올듯;;;

그럼 소스 나갑니다^_^

Preview : http://www.zective.com/sample/marquee.html

--------------------------------------------------------------------------------------------------------------------------------------------

<!-- Created by Zective -->

<html>
<title>아니 이게 대체 뭐여º∀º)?</title>
<head>
<style>
body {font-family:tahoma; font-size:11px; color:highlight;}

A:visited {text-decoration:none; cursor:hand; font-family:tahoma; font-size:11px; color:highlight;}
A:link {text-decoration:none; cursor:hand; font-family:tahoma; font-size:11px; color:highlight;}
A:hover {text-decoration:none; cursor:hand; font-family:tahoma; font-size:11px; color:highlight;}
A:active {text-decoration:none; cursor:hand; font-family:tahoma; font-size:11px; color:highlight;}
</style>

<script>

    // mq1 는 좌우 제어
    // mq2는 상하 제어
    // 물론 소스 수정하면 동시 제어도 가능;;

    // 실행
    function move(direction, kind) {

        // mq1 인지 mq2 인지 구분하여 그에 맞게 Marquee 태그 실행
        if(kind == 1) {
            mq1.start();
        } else {
            mq2.start();
        }
        
        // 왼쪽 (mq1)
        if(direction == 'L' || direction == 'l') {
            mq1.direction = 'left';
        }
        
        // 오른쪽 (mq1)
        else if(direction == 'R' || direction == 'r') {
            mq1.direction = 'right';
        }
        
        // 위쪽 (mq2)
        else if(direction == 'U' || direction == 'u') {
            mq2.direction = 'up';
        }
        
        // 아래쪽 (mq2)
        else {
            mq2.direction = 'down';
        }
    }

    // 정지
    function stop(kind) {

        // mq 인지 mq2 인지 구분하여 그에 맞게 Marquee 태그 정지
        if(kind == 1) {
            mq1.stop();
        } else {
            mq2.stop();
        }
    }

</script>
</head>


<!-- 페이지를 다 읽으면 Marquee 태그 정지 -->
<body onload="stop(1); stop(2);">

<center>
<br><br><br>

<marquee id="mq1" width="100" truespeed scrollamount="1" scrolldelay="15" bgcolor="ghostwhite" style="border:1 solid highlight;">123</marquee>
<br><br>
<a href="javascript:;" onmouseover="move('L', 1);" onmouseout="stop(1)" onfocus="this.blur();">왼쪽으로</a> | <a href="javascript:;" onmouseover="move('R', 1);" onmouseout="stop(1)" onfocus="this.blur();">오른쪽으로</a>

<!-- 에헤라디야~ -->

<br><br><br>

<!-- 에헤라디야~ -->

<marquee id="mq2" width="100" height="100"  truespeed scrollamount="1" scrolldelay="15" bgcolor="ghostwhite" style="border:1 solid highlight;">123</marquee>
<br><br>
<a href="javascript:;" onmouseover="move('U', 2);" onmouseout="stop(2)" onfocus="this.blur();">위쪽으로</a> | <a href="javascript:;" onmouseover="move('D', 2);" onmouseout="stop(2)" onfocus="this.blur();">아래쪽으로</a>

<!-- 에헤라디야~ -->

<br><br><br><br><br>

<!-- 에헤라디야~ -->

<font style="font size:72px 돋움;" onmouseover="this.innerHTML='( º▽º)!';" onmouseout="this.innerHTML='( º∀º)?';" style="cursor:default;">( º∀º)?</font>
</center>

</body>
</html>
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
퍼미션을 보기좋게 구하자! [4] 플로렐라 2005.01.03
나만의 미니홈 만들기 ㅡ delete.php 파일 [2] 예뜨락 2005.01.03
"를 그냥 사용하기 [3] 추천대화상대 2005.01.02
IE 에서도 투명 알파값이 적용된 PNG 이미지를 맘껏 활용하자! [8] file THE PAPER™ 2004.12.27
나만의 미니홈 만들기 ㅡ메뉴에 게시판 연결 [5] file 예뜨락 2004.12.17
4. 쿼리문 [6] 티다 2004.12.11
'참조'에 관한 간단한 예제 플로렐라 2004.12.09
개판 오분전 라인 그래프 [4] 미친개 2004.12.01
실명 진위여부 확인 [10] piasol 2004.12.01
나만의 미니홈 만들기 ㅡ write.php 파일과 write_ok [5] 예뜨락 2004.11.30
나만의 미니홈 만들기 ㅡ view.php 파일과 제목링크 [9] file 예뜨락 2004.11.27
나만의 미니홈 만들기 ㅡ list.php , 디비 테이블 생성 [6] file 예뜨락 2004.11.26
나만의 미니홈 만들기 ㅡ 게시판 list.php 파일의 모양새 [6] 예뜨락 2004.11.23
나만의 미니홈 만들기 ㅡ 게시판의 디자인 file 예뜨락 2004.11.22
나만의 미니홈 만들기 ㅡ 미니홈 생성 페이지 [3] file 예뜨락 2004.11.20
나만의 미니홈 만들기 ㅡ 기초적인 관리 페이지 [3] file 예뜨락 2004.11.20
나만의 미니홈 만들기 ㅡ 메인 기초 설계3 .레이아웃 [2] file 예뜨락 2004.11.19
나만의 미니홈 만들기 ㅡ 메인 기초 설계2 .레이아웃 예뜨락 2004.11.18
나만의 미니홈 만들기 ㅡ 메인 기초 설계 .home.php [12] file 예뜨락 2004.11.17
나만의 미니홈 만들기 ㅡ 글쓰기에 앞서... [1] 예뜨락 2004.11.17
태그 쓰기