자 바스 크 립 트 가 실현 한 원생 태 호 환 IE6 조절 가능 스크롤 문자 기능 상세 설명

5877 단어 JavaScript스크롤 텍스트
본 고의 실례 는 자 바스 크 립 트 가 실현 한 원생 태 호 환 IE6 조절 가능 한 스크롤 문자 기능 을 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
HTML 에는 자체 적 으로 marquee 태그 가 있 지만 스크롤 텍스트 를 설정 하 는 데 사 용 됩 니 다.이 작은 구성 요소 도 비교적 흔히 볼 수 있 지만 인터넷 의 코드 품질 은 중요 하지 않 은 작은 효 과 를 위해 불필요 한 코드 를 많이 추가 했다.사실 이 물건 은 오른쪽 에서 왼쪽으로 굴 러 갈 수 있 도록 화면 가장자리 에 이 르 러 자동 으로 돌아 오 면 됩 니 다.왜 페이드아웃 되 는 화려 하고 실속 이 없 는 것 을 위해 코드 를 한 무더기 썼 습 니까?다음은 자신 이 쓴 padding-left 를 이용 하여 스크롤 문 자 를 소개 합 니 다.padding-left 라 는 것 은 대부분의 브 라 우 저 에서 문제 가 없 기 때 문 입 니 다.
기본 목표
다음 그림 에서 처음에 문 자 는 15px-400 px 라 는 구역 에서 0.05s,5px 픽 셀 의 빈 틈 없 이 굴 러 갈 수 있 습 니 다.물론 아래 의 스 크 립 트 를 바 꾸 면 지구 에서 우주 로 굴 러 가도 괜 찮 습 니 다.지구의 px 와 우주 px 만 알려 주시 면 됩 니 다.그리고 두 개의 단 추 를 설정 하면'정지'를 누 르 면 멈 추고 멈 춘 후에'시작'을 누 르 면 시작 합 니 다.'시작'상태 에서 N 을 누 르 면'시작'은 버그 가 나 오지 않 습 니 다.이 상 태 를 계속 유지 하 세 요.'정지'상태 에서 N 을 누 르 면'정지'도 문제 가 없습니다.

HTML 레이아웃
코드 는 다음 과 같 습 니 다:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>marquee</title>
</head>
<body>
<div>sssssss</div>
<div id="marquee" style="padding-left:0px;">marquee</div>
<div>sssssss</div>
<button onclick="return marquee_move_stop()">  </button>
<button onclick="return marquee_move_start()">  </button>
</body>
</html>
생각 은 아래 그림 과 같 아서,한 그림 이 천 마디 말 을 이 길 수 있 으 니,말 하지 않 겠 다.코드 와 그림 을 스스로 비교 하 세 요.

3.스 크 립 트 부분
이것 은 전체 컨트롤 의 핵심 이다.

<script>
//        5px/0.05s，          ，       。
var speed=5;
var marqueeTimer=setInterval("marquee_move()",50);
//                         
var isMarqueeMove=true;
//       
function marquee_move(){
  //             px padding-left           
  // padding-left:0px;         var marquee_x=0;
  var marquee_x=parseInt(document.getElementById("marquee").style.paddingLeft.substring(0,document.getElementById("marquee").style.paddingLeft.indexOf("px")));
  //    400px    ，       ，    
  if(marquee_x>400){
    speed=-5;
  }
  //       0，       bug
  if(marquee_x<15){
    speed=5;
  }
  //     5px
  document.getElementById("marquee").style.paddingLeft=marquee_x+speed+"px";
}
//                
//     flag，   marqueeTimer=setInterval("marquee_move()",50);     ，            
//                 
function marquee_move_stop(){
  if(isMarqueeMove){
    clearTimeout(marqueeTimer);
    isMarqueeMove=false;
  }
}
function marquee_move_start(){
  if(!isMarqueeMove){
    marqueeTimer=setInterval("marquee_move()",50);
    isMarqueeMove=true;
  }
}
</script>
총화
1.CSS 에서 띠-의 속성 은 자바 script 에서 대문자 로 바 꿔 야 합 니 다.예 를 들 어 CSS 의 padding-left 는 자바 script 에서 padding Left 이 고 그렇지 않 으 면 마이너스 로 처 리 됩 니 다.
2.padding-left 를 이용 하여 이 구성 요 소 를 완성 하려 면 left 를 사용 하지 않 고 절대적 인 포 지 셔 닝 을 설정 한 다음 에 이 구성 요 소 를 어떻게 배치 하 는 지 고려 해 야 합 니 다.
3.이 물건 은 브 라 우 저의 백분율 너비 에서 스크롤 합 니 다.이렇게 하지 않 는 것 이 좋 습 니 다.자바 script 에서 브 라 우 저의 폭 을 꺼 내 면 여러 가지 호환성 문제 가 발생 할 수 있 기 때 문 입 니 다.정 해진 값 을 설정 하 는 것 이 좋 습 니 다.이런 코드 는 간단 합 니 다.
첨부:HTML 비교 인기 태그 와 속성
1<hr>라벨 은 수평 구분자 하 나 를 추가 할 수 있 습 니 다.단일 태그 탭,속성 width,size,color,align(후 연결 값)noshade(텍스트 상자 의 disabled 와 같이 이 수평선 은 그림자 가 없 음 을 표시 합 니 다)
2<marquee>라벨 은 마이크로소프트 에 의 해 폐지 되 었 다.
마이크로소프트 라 는 녀석 은 최신 IE8 에서 이미 MARQUEE 에 대한 지 지 를 포기 했다.
marquee 로 문제 가 많 습 니 다.DW 가 힌트 를 주 는 것 은 신중 함 을 경고 하 는 것 이다.
예 를 들 어 아래 코드 가 IE8 에서 굴 러 가 는 데 문제 가 있 습 니 다.그림 이 굴 러 간 후에 자동 으로 새로 고침 되 고 보기 싫 으 며 현실 적 으로 빈 틈 없 이 굴 러 갈 수 없습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>  </title>
</head>
<body>
<marquee width=250px behavior="scroll">
<a href="http://www.163.com" rel="external nofollow" ><img src="img0.jpg" width=100 hspace=50/></a>
<a href="http://www.baidu.com" rel="external nofollow" ><img src="img28.jpg" width=100px /></a>
</marquee>
</body>
</html>
3<strong>라벨 은 라벨 을 강조 하고 내용 을 바탕 으로 한다<b>물리 양식 입 니 다.두 개의 태그 라벨 은 각각 글꼴 을 표시 하고 아래 표 시 를 할 수 있 습 니 다.
4.© 는 저작권 문 자 를 대표 합 니 다.©，® 는 등록 상표,  는 빈 칸 입 니 다.
5.그림 에 대해 hspace 속성 은 그림 과 그림 사이 의 간격 을 설정 할 수 있 습 니 다.
6<body>태그 도 속성 이 있 는 vlink 링크 는 방문 하지 않 은 하이퍼링크 의 색상 을 각각 설정 할 수 있 습 니 다.leftmargin 과 topmargin 은 문서 의 왼쪽 거리 와 위쪽 거 리 를 각각 규정 할 수 있 습 니 다.
7.검색엔진 에 캡 처 된 키워드 와 웹 설명 을 각각 설정 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
JS 정적 페이지 검색 및 하 이 라이트 디 스 플레이 기능 전체 예제 구현
위 챗 애플 릿 미디어 구성 요소 상세 설명(영상,음악,그림)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage