최근에 나는 롤링 뉴스 효과를 구현하고 싶었고 인터넷에서 몇 가지 정보를 확인한 결과 두 가지 기본 구현 방법이 있음을 발견했습니다.
1. Marquee 태그를 사용하세요. 이 태그의 사용에 대해 비교적 자세한 기사를 재인쇄했습니다. 이 태그의 장점은 사용하기 쉽다는 점입니다. 단점은 IE8, XHTML4에서도 점차 사용이 중단된다는 것입니다. .0 느슨한. dtd는 괜찮지만, Loose.dtd를 제거하는 것은 그렇지 않습니다.
2. div+javascript 방법을 사용합니다. 이 방법의 장점은 거의 모든 브라우저와 호환되며 예측 가능한 기간 내에 안정적으로 실행될 수 있다는 것입니다. 그리고 div를 사용하면 웹페이지에서 기존 CSS 리소스를 사용하여 많은 눈부신 효과를 얻을 수 있습니다. 단점은 특정 프로그래밍 경험과 인내심이 필요하다는 것입니다.
javascript+div를 사용하는 기본 원리는 이동 효과를 얻기 위해 scrollTop 속성과 offsettheight 속성을 사용하는 것과 같습니다. 일반적으로 두 개의 div를 사용하고 내부 내용은 동일하며 두 개의 div를 이어 붙여 연속 루프 효과를 형성합니다. 다음은 제가 찾은 두 개의 샘플 코드입니다. 첫 번째 코드는 제가 사용한 코드와 정확히 일치하며 작동합니다. 두 번째는 테스트하지 않았습니다. 비교를 위해 이 글을 쓰고 있습니다. 두 번째 사본은 웹사이트에서 가져왔기 때문에 사용할 수 있을 것입니다.
첫 번째 코드
다음과 같이 코드 코드를 복사합니다.
<div id="layer1" style="overflow-y:hidden;width:120;">
<div id="layer2">
<%
ArrayList AnnounceList = DBTools.getView("select * sys_announce order by pubdate DESC");
for (int i = 1; i < AnnounceList.size() && i < 5; i++) {
String AnnounceArr[] = (String[]) AnnounceList.get(i);
문자열 내용 = AnnounceArr[1];
String date = AnnounceArr[2].substring(announceArr[2].indexOf("-")+1, AnnounceArr[2].indexOf(" "));
%>
<테이블 셀 간격="0" cellpadding="0">
<tr>
<td/>
</tr>
</table>
<테이블 셀 간격="0" cellpadding="0">
<tr>
<td valign="맨 위">
<img vspace="5" valign="top" src="images/index_18.gif" mce_src="images/index_18.gif"/>
</td>
<td 스타일="라인 높이: 20px;" mce_style="라인 높이: 20px;">
<%=내용%> <%=날짜%>
</td>
<td></td>
</tr>
</table>
<%
}
%>
</div>
<div id="layer3"></div>
</div>
<mce:script 언어="javascript"><!--
var layerHeight = 100; // 스크롤 영역의 높이를 정의합니다.100
var iFrame = 1; // 프레임당 이동되는 픽셀을 정의합니다.
var iFrequency = 50; // 프레임 주파수를 정의합니다.
var 타이머; // 시간 핸들을 정의합니다.
if(document.getElementById("layer2").offsetHeight >= layerHeight)
document.getElementById("layer1").style.height = layerHeight;
또 다른
document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;
document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML;
// 경고(document.getElementById("layer2").innerHTML);
함수 이동(){
if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){
document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);
}
또 다른 {
document.getElementById("layer1").scrollTop += iFrame;
}
}
타이머 = setInterval("move()",iFrequency);
document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}
document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
// --></mce:script>
두 번째 코드
다음과 같이 코드 코드를 복사합니다.
<SCRIPT 언어="자바스크립트">
var strArray=새 배열();
strArray[1]=''
+'<테이블 너비=136 테두리=0 셀 간격=0 셀 패딩=0><tr><td 너비=16 높이=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" 너비=12 높이=12 vspace=5></td><td 너비=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">중국천연자원학회 제6차 전국회원총회 및 학술연차총회 공지(제2호) (09.10 )</a></td></tr></table><table width=43 border=0cellspacing=0cellpadding=0><tr><td 높이=6></td></tr></table>'
+'<테이블 너비=136 테두리=0 셀 간격=0 셀 패딩=0><tr><td 너비=16 높이=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" 너비=12 높이=12 vspace=5></td><td 너비=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">""적응형 공간정보 시각화 이론, 기술 및 방법"에 관한 논문 모집 세미나(09.04)</a > </td></tr></table><테이블 너비=43 테두리=0 셀 간격=0 셀 패딩=0><tr><td 높이=6></td></tr></table>'
+'<테이블 너비=136 테두리=0 셀 간격=0 셀 패딩=0><tr><td 너비=16 높이=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" 너비=12 높이=12 vspace=5></td><td 너비=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">중국과학원 지리과학원 회계직 채용 공고(09.03)< /a></td> </tr></table><테이블 너비=43 테두리=0 셀 간격=0 셀 패딩=0><tr><td 높이=6></td></tr></table>'
strArray[0]=''
+'<테이블 너비=136 테두리=0 셀 간격=0 셀 패딩=0><tr><td 너비=16 높이=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" 너비=12 높이=12 vspace=5></td><td 너비=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554">물이슈포럼 강좌시리즈 - 2009년 제7강(총 90강)(09.01)</a> </td></tr></table><테이블 너비=43 테두리=0 셀 간격=0 셀 패딩=0><tr><td 높이=6></td></tr></table>'
+'<테이블 너비=136 테두리=0 셀 간격=0 셀 패딩=0><tr><td 너비=16 높이=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" 너비=12 높이=12 vspace=5></td><td 너비=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">2009' 중국과학원 지리정보기술 독립혁신포럼 및 SuperMap GIS 기술 컨퍼런스(09.01)</a >< /td></tr></table><테이블 너비=43 테두리=0 셀 간격=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<테이블 너비=136 테두리=0 셀 간격=0 셀 패딩=0><tr><td 너비=16 높이=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" 너비=12 높이=12 vspace=5></td><td 너비=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532">주 핵심 자원 및 환경 정보 시스템 연구소에서는 "유한 요소법" 방향으로 객원 연구원을 모집하고 있습니다. 2009년(08.07 )</a></td></tr></table><table width=43 border=0cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
/*
showId=Math.floor(Math.random()*1);
tempStr=strArray[showId];
strArray[showId]=strArray[0];
strArray[0]=tempStr;
*/
</SCRIPT>
<스크립트>
var 타이머;
document.write('<div id="icefable1">'
+'<테이블 너비=130; 테두리=0 셀 간격=0 셀 패딩=0>'
+'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[1]+'</td></ tr>'
+'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[0]+'</td></ tr>'
+'</table>'
+'</div>'
+'<div id="icefable2" style="position:absolute;visibility:hidden" mce_style="position:absolute;visibility:hidden"></div>');
/*
var marqueesHeight=132;
var stopscroll=false;
icefable1.scrollTop=0;
*/
와(icefable1){
/*
스타일.폭=0;
style.height=marqueesHeight;
style.overflowX="표시";
style.overflowY="숨김";
noWrap=true;
*/
onmouseover=function(){clearInterval(timer);};
onmouseout=function(){timer = setInterval("move()",100);};
}
/*
var preTop=0;
var 현재상단=0;
var 정지시간=0;
*/
함수 init_srolltext(){
icefable2.innerHTML="";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
타이머 = setInterval("move()",100);
}
함수 이동(){
if(document.getElementById("icefable2").scrollTop >= document.getElementById("icefable1").offsetHeight)
document.getElementById("icefable2").scrollTop -= (document.getElementById("icefable1").offsetHeight - 1);
또 다른
ocument.getElementById("icefable2").scrollTop += 1;
}
init_srolltext();
함수 스크롤업(){
if(스톱스크롤==true) return;
currentTop+=4;
if(현재상단==132)
{
정지시간+=4;
현재상단-=0;
}
또 다른 {
preTop=icefable1.scrollTop;
icefable1.scrollTop+=4;
if(preTop==icefable1.scrollTop){
icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
icefable1.scrollTop+=4;
}
}
}
//setTimeout("init_srolltext()",2000);
//init_srolltext();
</SCRIPT>