js 실 용적 인 무 중단 스크롤 효과(양호 호환성)

다음은 방법 을 소개 한다.기본적으로 구조 와 행 위 를 분리 시 킬 수 있 습 니 다.이들 의 관 계 는 하나의 id 만 있 으 면 됩 니 다.사용 하기에 편리 합 니 다.또한 같은 js 코드 는 본 페이지 에 여러 개의 스크롤 그림 효 과 를 실현 할 수 있 습 니 다.서로 간섭 하지 않 습 니 다.1.xhtml

 
<div class="demo" id="demo1"> 
<table cellpadding="0" cellspacing="0"> 
<tr> 
<td><ul> 
<li><img src="img.jpg"><br> 
   1</li> 
<li><img src="img.jpg"><br> 
   2</li> 
<li><img src="img.jpg"><br> 
   3</li> 
<li><img src="img.jpg"><br> 
   4</li> 
</ul></td> 
</tr> 
</table> 
</div> 
<!--        --> 
<div class="demo" id="demo2"> 
<table cellpadding="0" cellspacing="0"> 
<tr> 
<td><ul> 
<li><img src="img.jpg"><br> 
   1</li> 
<li><img src="img.jpg"><br> 
   2</li> 
<li><img src="img.jpg"><br> 
   3</li> 
<li><img src="img.jpg"><br> 
   4</li> 
</ul></td> 
</tr> 
</table> 
</div> 

2.css

 
ul,li,img,td{font-size:12px;list-style-type:none;text-align:center;margin:0;padding:0;} 
.demo{width:230px;margin-bottom:8px;height:172px;overflow:hidden;} 
.demo ul{width:408px;clear:both;} 
.demo li{width:102px;float:left;text-align:center;} 
.demo img{margin-bottom:8px;} 

3.js

 
function startmarquee(lh,speed,delay,index){ 
var o=document.getElementById("demo"+index); 
var o_td=o.getElementsByTagName("td")[0]; 
var str=o_td.innerHTML; 
var newtd=document.createElement("td"); 
newtd.innerHTML=str; 
o_td.parentNode.appendChild(newtd); 
var t; 
var p=false; 
o.onmouseover=function(){p=true;} 
o.onmouseout=function() {p=false;} 
function start(){ 
t=setInterval(Marquee,speed); 
if(!p){o.scrollLeft += 3;} 
} 
function Marquee(){ 
if(o_td.offsetWidth-o.scrollLeft<=0) 
o.scrollLeft-=o_td.offsetWidth; 
else{ 
if(o.scrollLeft%lh!=0){ 
o.scrollLeft+= 3 
}else{clearInterval(t); setTimeout(start,delay);} 
} 
} 
setTimeout(start,delay); 
} 
startmarquee(102,1,1500,1);//        
startmarquee(102,30,1,2);//        

테스트 코드:js 는 html 파일 로 딩 이 완 료 된 후에 실행 해 야 정상적으로 운행 할 수 있 습 니 다.그래서 js 를 div 에 넣 고;그림 스크롤 은 문자 스크롤 실현 원리 와 대동소이 하 다.데모 코드: // [Ctrl+A 전체 주석:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]코드 는 102 폭 의 그림 을 대상 으로 코드 에서 수정 할 수 있 고 자신의 그림 크기 에 맞 는 너비 로 완벽 하 게 실행 할 수 있 습 니 다.