JavaScript를 사용하여 뉴스 스크롤 효과 구현(예제 코드)_javascript 기술
- WBOY원래의
- 2016-05-16 17:12:241153검색
최근 롤링 뉴스 효과를 구현하고 싶었는데 인터넷에서 몇 가지 정보를 확인한 결과 두 가지 기본 구현 방법이 있음을 발견했습니다.
1. Marquee 태그를 사용하세요. 이 태그의 사용에 대해 비교적 자세한 글을 재인쇄했습니다. 단점은 사용이 점차 중단된다는 점입니다. , IE8에서도 XHTML4.0의 Loose.dtd는 괜찮지만, Loose.dtd를 제거하는 것은 괜찮습니다.
2. div 자바스크립트 방식을 사용합니다. 이 방법의 장점은 거의 모든 브라우저와 호환되며 예측 가능한 시간 내에 안정적으로 실행할 수 있다는 것입니다. 그리고 div를 사용하면 웹페이지에서 기존 CSS 리소스를 사용하여 많은 눈부신 효과를 얻을 수 있습니다. 단점은 특정 프로그래밍 경험과 인내심이 필요하다는 것입니다.
자바스크립트 div를 사용하는 기본 원리는 동일합니다. 스크롤탑 속성과 오프셋 높이 속성을 사용하면 움직이는 효과를 얻을 수 있습니다. 일반적으로 두 개의 div를 사용하고 내부 내용은 동일하며 두 개의 div를 이어 붙여 연속 루프 효과를 형성합니다. 다음은 제가 찾은 두 개의 샘플 코드입니다. 첫 번째 코드는 제가 사용한 코드와 정확히 일치하며 작동합니다. 두 번째는 테스트하지 않았습니다. 비교를 위해 이 글을 쓰고 있습니다. 두 번째 사본은 웹사이트에서 가져왔기 때문에 사용할 수 있을 것입니다.
첫 번째 코드
코드 복사 코드는 다음과 같습니다.
<%
ArrayList announceList = DBTools.getView("select * from sys_announce order by pubdate DESC");
for (int i = 1; i < announceList.size() && i < 5; i++) {
String announceArr[] = (String[]) announceList.get(i);
String content = announceArr[1];
String date = announceArr[2].substring(announceArr[2].indexOf("-")+1, announceArr[2].indexOf(" "));
%>
 | <%=content%> <%=date%> |
<%
}
%>
iFrame = 1; // 각 프레임에서 이동하는 픽셀을 정의합니다.
var iFrequency = 50; // 프레임 빈도를 정의합니다.
var 타이머; // 시간 핸들을 정의합니다. offsetHeight >= layerHeight)
document.getElementById("layer1").style.height = layerHeight; getElementById ("layer2").offsetHeight;
function move(){
if( document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){
document .getElementById("layer1").scrollTop -= (document.getElementById("layer2"). offsetHeight);
> 타이머 = setInterval("move()",iFrequency); document.getElementById ("layer1").onmouseout=function() { 타이머=setInterval("move()",iFrequency);}
// -->
두 번째 코드
코드 복사
코드는 다음과 같습니다.