> 웹 프론트엔드 > JS 튜토리얼 > js 텍스트 가로 스크롤 효과_javascript 기술

js 텍스트 가로 스크롤 효과_javascript 기술

WBOY
풀어 주다: 2016-05-16 15:32:47
원래의
2907명이 탐색했습니다.

이 글에서는 js 텍스트 가로 스크롤 특수 효과 코드를 공유합니다. 구체적인 구현 내용은 다음과 같습니다.

페이지 레이아웃

<div id="scroll_div" class="fl"> 
  <div id="scroll_begin">
   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
  </div> 
  <div id="scroll_end"></div>
 </div> 
로그인 후 복사

스타일:

.pad_right{ padding-right:2em;}
#scroll_div {height:26px;overflow: hidden;white-space: nowrap;width:535px;margin-left:10px;}
#scroll_begin,#scroll_end {display: inline;}
로그인 후 복사

js 코드:

//文字横向滚动
function ScrollImgLeft(){ 
 var speed=50;
  var MyMar = null;
 var scroll_begin = document.getElementById("scroll_begin"); 
 var scroll_end = document.getElementById("scroll_end"); 
 var scroll_div = document.getElementById("scroll_div"); 
 scroll_end.innerHTML=scroll_begin.innerHTML; 
 function Marquee(){ 
  if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
   scroll_div.scrollLeft-=scroll_begin.offsetWidth; 
  else 
   scroll_div.scrollLeft++; 
  } 
  MyMar=setInterval(Marquee,speed); 
  scroll_div.onmouseover = function(){
       clearInterval(MyMar);
     }
     scroll_div.onmouseout = function(){
       MyMar = setInterval(Marquee,speed);     
     }  
}
ScrollImgLeft();
로그인 후 복사

위는 js 텍스트의 가로 스크롤 효과를 쉽게 구현하는 방법입니다. js 텍스트의 가로 스크롤 효과를 자신의 웹 페이지에 추가할 수 있습니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿