เมื่อเร็วๆ นี้ ฉันต้องการใช้เอฟเฟกต์ข่าวต่อเนื่อง ฉันตรวจสอบข้อมูลบางอย่างบนอินเทอร์เน็ตแล้วพบว่ามีวิธีการใช้งานพื้นฐานสองวิธี:
1. ใช้แท็กปะรำ ฉันได้พิมพ์บทความที่มีรายละเอียดค่อนข้างมากเกี่ยวกับการใช้แท็กนี้ ข้อดีของแท็กนี้คือมันใช้งานง่าย ข้อเสียคือผู้คนค่อยๆ หยุดใช้มัน แม้แต่ใน IE8, XHTML4 .0 หลวม dtd ก็โอเค แต่การลบ loose.dtd ไม่ได้
2. ใช้วิธี div+javascript ข้อดีของวิธีนี้คือสามารถทำงานร่วมกับเบราว์เซอร์เกือบทั้งหมดและยังคงสามารถทำงานได้อย่างเสถียรภายในระยะเวลาที่คาดการณ์ได้ และการใช้ div ช่วยให้หน้าเว็บสามารถใช้ทรัพยากร css ที่มีอยู่เพื่อให้ได้เอฟเฟกต์ที่น่าทึ่งมากมาย ข้อเสียคือต้องใช้ประสบการณ์ในการเขียนโปรแกรมและความอดทนพอสมควร
หลักการพื้นฐานของการใช้ javascript+div จะเหมือนกัน ใช้แอตทริบิวต์ scrollTop และแอตทริบิวต์ offsettheight เพื่อให้ได้เอฟเฟกต์การเคลื่อนไหว โดยทั่วไปแล้ว จะใช้ 2 div เนื้อหาภายในจะเหมือนกัน จากนั้น div ทั้งสองจะต่อกันเพื่อสร้างเอฟเฟกต์ลูปต่อเนื่อง ด้านล่างนี้คือโค้ดตัวอย่างสองโค้ดที่ฉันพบ โค้ดแรกคือโค้ดที่ฉันใช้และใช้งานได้ ฉันไม่ได้ทดสอบอันที่สอง ฉันกำลังเขียนสิ่งนี้เพื่อเปรียบเทียบ สำเนาที่สองน่าจะใช้ได้เพราะฉันเอามาจากเว็บไซต์
รหัสแรก
คัดลอกรหัสรหัสดังต่อไปนี้:
<div id="layer1" style="overflow-y:hidden;width:120;">
<div id="layer2">
-
ArrayListการประกาศรายการ = DBTools.getView("select * from sys_announce order by pubdate DESC");
สำหรับ (int i = 1; i < ประกาศList.size() && i < 5; i++) {
สตริงการประกาศ Arr[] = (สตริง[]) ประกาศรายการ.get(i);
เนื้อหาสตริง = ประกาศ Arr [1];
วันที่สตริง = ประกาศArr[2].substring(ประกาศArr[2].indexOf("-")+1, ประกาศArr[2].indexOf(" "));
-
<ตาราง cellspacing="0" cellpadding="0">
<tr>
<td/>
</tr>
</ตาราง>
<ตาราง cellspacing="0" cellpadding="0">
<tr>
<td valign="ด้านบน">
<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>
<td></td>
</tr>
</ตาราง>
-
-
-
</div>
<div id="layer3"></div>
</div>
<mce:script language="javascript"><!--
var layerHeight = 100; // กำหนดความสูงของพื้นที่เลื่อน 100
var iFrame = 1; // กำหนดพิกเซลที่ย้ายต่อเฟรม
var iFrequency = 50; // กำหนดความถี่ของเฟรม
var timer; // กำหนดตัวจัดการเวลา
ถ้า(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;
-
-
timer = setInterval("ย้าย()",iFrequency);
document.getElementById("layer1").onmouseover=function() {clearInterval(ตัวจับเวลา);}
document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
// --></mce:script>
รหัสที่สอง
คัดลอกรหัสรหัสดังต่อไปนี้:
<SCRIPT language="JavaScript">
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" 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">ประกาศการประชุมสมาชิกสภาผู้แทนราษฎรแห่งชาติครั้งที่ 6 และการประชุมประจำปีทางวิชาการของสมาคมทรัพยากรธรรมชาติแห่งประเทศจีน (ครั้งที่ 2) (09.10 )</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=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" 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 cellspacing=0 cellpadding=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" 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">ประกาศรับสมัครตำแหน่งงานบัญชีของ Institute of Geographic Sciences and Natural Resources, Chinese Academy of Sciences (09.03)< /a></td> </tr></table><table width=43 border=0 cellspacing=0 cellpadding=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" 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 cellspacing=0 cellpadding=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" 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' Chinese Academy of Sciences Geographic Information Technology ฟอรัมนวัตกรรมอิสระ และการประชุมเทคโนโลยี SuperMap GIS (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" 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">ห้องปฏิบัติการหลักของรัฐด้านทรัพยากรและระบบสารสนเทศสิ่งแวดล้อมกำลังรับสมัครนักวิจัยรับเชิญในทิศทางของ "Finite Element Method" ในปี 2009 (08.07 )</a></td></tr></table><table width=43 border=0 cellspacing=0 เซลล์แพดดิ้ง=0><tr><td ความสูง=6></td></tr></table>'
-
showId=Math.floor(Math.random()*1);
tempStr=strArray[showId];
strArray[showId]=strArray[0];
strArray[0]=tempStr;
-
</สคริปต์>
<สคริปต์>
ตัวจับเวลา var;
document.write('<div id="icefable1">'
+'<ความกว้างของตาราง=130; border=0 ระยะห่างระหว่างเซลล์=0 ช่องว่างภายใน=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>');
-
var marqueesHeight=132;
var stopcroll=false;
icefable1.scrollTop=0;
-
ด้วย (icefable1) {
-
สไตล์.ความกว้าง=0;
style.height=marqueesHeight;
style.overflowX = "มองเห็นได้";
style.overflowY = "ซ่อน";
noWrap=จริง;
-
onmouseover=function(){clearInterval(จับเวลา);};
onmouseout=function(){timer = setInterval("ย้าย()",100);};
-
-
var preTop=0;
var currentTop=0;
เวลาหยุด var=0;
-
ฟังก์ชั่น init_srolltext(){
icefable2.innerHTML="";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
จับเวลา = setInterval("ย้าย()",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();
ฟังก์ชั่น scrollUp(){
ถ้า (stopscroll==true) กลับมา;
ปัจจุบันบน+=4;
ถ้า(ปัจจุบันด้านบน==132)
-
เวลาหยุด+=4;
ปัจจุบันบน-=0;
-
อื่น {
preTop=icefable1.scrollTop;
icefable1.scrollTop+=4;
ถ้า(preTop==icefable1.scrollTop){
icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
icefable1.scrollTop+=4;
-
-
-
//setTimeout("init_srolltext()",2000);
//init_srolltext();
</สคริปต์>