أردت مؤخرًا تنفيذ تأثير الأخبار المتداولة، وقد قمت بمراجعة بعض المعلومات على الإنترنت ووجدت أن هناك طريقتين أساسيتين للتنفيذ:
1. استخدم علامات الشاشة الاسمية. لقد قمت بإعادة طباعة مقالة مفصلة نسبيًا حول استخدام هذه العلامة. وتتمثل ميزة هذه العلامة في أنها سهلة الاستخدام. والعيب هو أن العديد من المتصفحات لا تدعمها .0 فضفاضة dtd أمر جيد، ولكن إزالة فضفاضة.dtd ليست كذلك.
2. استخدم طريقة div+javascript. وتتمثل ميزة هذه الطريقة في أنها متوافقة مع جميع المتصفحات تقريبًا ولا يزال من الممكن تشغيلها بثبات خلال فترة زمنية يمكن التنبؤ بها. ويسمح استخدام div لصفحات الويب باستخدام موارد CSS الموجودة لتحقيق العديد من التأثيرات المبهرة. العيب هو أنه يتطلب خبرة برمجة معينة وصبرًا.
المبدأ الأساسي لاستخدام javascript+div هو نفسه، استخدم سمة التمرير للأعلى وسمة الإزاحة لتحقيق التأثير المتحرك. بشكل عام، يتم استخدام قسمين، والمحتوى الداخلي هو نفسه، ثم يتم ربط القسمين لتشكيل تأثير حلقة مستمرة. فيما يلي نموذجان من الأكواد التي وجدتها، الأول هو بالضبط ما استخدمته وهو يعمل. ولم أختبر الثاني. أكتب هذا للمقارنة. النسخة الثانية يجب أن تكون صالحة للاستعمال لأنني أخذتها من الموقع.
الكود الأول
انسخ رمز الكود كما يلي:
<div id="layer1" style="overflow-y:hidden;width:120;">
<div معرف = "layer2">
<%
ArrayListannaList = DBTools.getView("اختر * من sys_announce ترتيبًا بحلول تاريخ النشر DESC");
for (int i = 1; i <annaList.size() && i < 5; i++) {
StringannaArr[] = (String[]) أعلنList.get(i);
محتوى السلسلة = أعلن عن[1];
String date =annaArr[2].substring(announceArr[2].indexOf("-")+1, AnneArr[2].indexOf(" "));
%>
<جدول تباعد الخلايا = "0" خلية الحشو = "0">
<تر>
<TD/>
</tr>
</الجدول>
<جدول تباعد الخلايا = "0" خلية الحشو = "0">
<تر>
<td فالين = "أعلى">
<img vspace="5" valign="top" src="images/index_18.gif" mce_src="images/index_18.gif"/>
</TD>
<td style = "ارتفاع الخط: 20px؛" mce_style = "ارتفاع الخط: 20px؛">
<%=content%> <%=date%>
</TD>
<td></td>
</tr>
</الجدول>
<%
}
%>
</div>
<div id="layer3"></div>
</div>
<mce:script language="javascript"><!--
var LayerHeight = 100; // تحديد ارتفاع منطقة التمرير.100
var iFrame = 1; // تحديد وحدات البكسل المنقولة لكل إطار.
var iFrequency = 50; // تحديد تردد الإطار.
فار الموقت؛ // تحديد مقبض الوقت.
إذا (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;
}
}
timer = setInterval("move()",iFrequency);
document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}
document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
// --></mce:script>
الكود الثاني
انسخ رمز الكود كما يلي:
<لغة البرنامج النصي = "جافا سكريبت">
var strArray=new Array();
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">إشعار المؤتمر الوطني السادس للأعضاء والاجتماع السنوي الأكاديمي لجمعية الموارد الطبيعية في الصين (رقم 2) (09.10 )</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=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" 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 الارتفاع=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">سلسلة محاضرات منتدى قضايا المياه - المحاضرة السابعة عام 2009 (المحاضرة 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" 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 GIS (09.01)</a >< /td></tr></table><عرض الجدول=43 حدود=0 تباعد الخلايا=0 حشو الخلية=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" 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 حشو الخلية=0><tr><td الارتفاع=6></td></tr></table>'
/*
showId=Math.floor(Math.random()*1);
tempStr=strArray[showId];
strArray[showId]=strArray[0];
strArray[0]=tempStr;
*/
</النص>
<النص>
مؤقت فار؛
document.write('<div id="icefable1">'
+'<عرض الجدول=130 الحدود=0 تباعد الخلايا=0 خلية الحشو=0>'
+'<tr><td width=130; tr>'
+'<tr><td width=130; 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){
/*
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
*/
onmouseover=function(){clearInterval(timer);};
onmouseout=function(){timer = setInterval("move()",100);};
}
/*
var preTop=0;
var currentTop=0;
فار توقف الوقت=0;
*/
الوظيفة init_srolltext(){
Icefable2.innerHTML="";
Icefable2.innerHTML+=icefable1.innerHTML;
Icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
timer = setInterval("move()",100);
}
نقل الوظيفة (){
إذا (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;
currentTop+=4;
إذا (الأعلى الحالي == 132)
{
وقت التوقف+=4;
currentTop-=0;
}
آخر {
preTop=icefable1.scrollTop;
Icefable1.scrollTop+=4;
إذا (preTop==icefable1.scrollTop){
Icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
Icefable1.scrollTop+=4;
}
}
}
//setTimeout("init_srolltext()",2000);
//init_srolltext();
</النص>