Недавно мне захотелось реализовать эффект скользящих новостей. Я проверил некоторую информацию в Интернете и обнаружил, что существует два основных метода реализации:
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">
<%
ArrayListounceList = DBTools.getView("выбрать * из порядка sys_announce по дате публикации DESC");
for (int i = 1; i <announceList.size() && i <5; i++) {
String анонсArr[] = (String[]) анонсList.get(i);
Строковое содержимое = анонсArr[1];
Строка даты = анонсArr[2].substring(announceArr[2].indexOf("-")+1, анонсArr[2].indexOf(" "));
%>
<таблица cellpacing="0" cellpadding="0">
<тр>
<тд/>
</tr>
</таблица>
<таблица cellpacing="0" cellpadding="0">
<тр>
<td valign="top">
<img vspace="5" valign="top" src="images/index_18.gif" mce_src="images/index_18.gif"/>
</td>
<td style="line-height: 20px;" mce_style="line-height: 20px;">
<%=содержание%> <%=дата%>
</td>
<тд></тд>
</tr>
</таблица>
<%
}
%>
</div>
<div id="layer3"></div>
</div>
<mce:script Language="javascript"><!--
var LayerHeight = 100 // Определить высоту области прокрутки.100;
var iFrame = 1 // Определить количество пикселей, перемещаемых за кадр.
var iFrequency = 50 // Определить частоту кадров.
var timer; // Определить дескриптор времени.
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;
// alert(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 Language="JavaScript">
вар strArray = новый массив ();
strArray[1]=''
+'<table width=136 border=0 cellpacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">Уведомление о шестом национальном конгрессе членов и ежегодном академическом собрании Общества природных ресурсов Китая (№ 2) (09.10 )</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">"Приглашение на семинар по теме "Теория, технологии и методы адаптивной пространственной визуализации информации" (09.04)</a > </td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">Уведомление о наборе на должности бухгалтеров Института географических наук и природных ресурсов Китайской академии наук (09.03)< /a></td> </tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
strArray[0]=''
+'<table width=136 border=0 cellpacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554">Серия лекций на форуме по водным проблемам – 7-я лекция в 2009 г. (всего 90 лекций) (09.01)</ a> </td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">2009' Независимый инновационный форум по географическим информационным технологиям Китайской академии наук и конференция по технологиям ГИС SuperMap (09.01)</a >< /td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=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=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
/*
showId=Math.floor(Math.random()*1);
tempStr=strArray[showId];
strArray[showId]=strArray[0];
стрАррай[0]=tempStr;
*/
</СКРИПТ>
<СКРИПТ>
вар таймер;
document.write('<div id="icefable1">'
+'<ширина таблицы=130; 0 cellspaceing=0 cellpadding=0>'
+'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[1]+'</td></ тр>'
+'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[0]+'</td></ тр>'
+'</таблица>'
+'</div>'
+'<div id="icefable2" style="position:absolute;visibility:hidden" mce_style="position:absolute;visibility:hidden"></div>');
/*
вар marqueesHeight=132;
вар stopscroll = ложь;
Icefable1.scrollTop=0;
*/
с(icefable1){
/*
стиль.ширина = 0;
style.height=marqueesHeight;
style.overflowX="видимый";
style.overflowY="скрытый";
noWrap = истина;
*/
onmouseover=function(){clearInterval(таймер);};
onmouseout=function(){timer = setInterval("move()",100);};
}
/*
вар preTop = 0;
вар currentTop = 0;
вар стоптайм = 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(stopscroll==true) return;
текущийТоп+=4;
если (текущийверх == 132)
{
время остановки+=4;
текущийTop-=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();
</СКРИПТ>