利用JavaScript实现新闻滚动效果(实例代码)
使用javascript+div方式的基本原理是一样的，利用scrollTop属性和offsetheight属性来实现移动效果。一般使用两个div，里面的内容是一样的，然后利用两个div拼接，形成不断循环的效果。下面是我找到的两份示例代码，第一份正是我用的代码，可以运行。第二份我没做测试。写出来是为了做个对比，第二份应该是能用的，因为那是我从网站上摘下来的。
第一份代码
<divid="layer1"style="overflow-y:hidden;width:120;">
<divid="layer2">
<%
ArrayListannounceList=DBTools.getView("select*fromsys_announceorderbypubdateDESC");
for(inti=1;i<announceList.size()&&i<5;i++){
StringannounceArr[]=(String[])announceList.get(i);
Stringcontent=announceArr[1];
Stringdate=announceArr[2].substring(announceArr[2].indexOf("-")+1,announceArr[2].indexOf(""));
%>
<tablecellspacing="0"cellpadding="0"border="0"width="43">
<tr>
<tdheight="10"/>
</tr>
</table>
<tablecellspacing="0"cellpadding="0"border="0"width="136">
<tr>
<tdheight="20"width="16"valign="top">
<imgheight="12"width="12"vspace="5"valign="top"src="images/index_18.gif"mce_src="images/index_18.gif"/>
</td>
<tdwidth="108"style="line-height:20px;"mce_style="line-height:20px;">
<%=content%> <%=date%>
</td>
<td></td>
</tr>
</table>
<%
}
%>
</div>
<divid="layer3"></div>
</div>
<mce:scriptlanguage="javascript"><!--
varlayerHeight=100;//定义滚动区域的高度.100
variFrame=1;//定义每帧移动的象素.
variFrequency=50;//定义帧频率.
vartimer;//定义时间句柄.
if(document.getElementById("layer2").offsetHeight>=layerHeight)
document.getElementById("layer1").style.height=layerHeight;
else
document.getElementById("layer1").style.height=document.getElementById("layer2").offsetHeight;
document.getElementById("layer3").innerHTML=document.getElementById("layer2").innerHTML;
//alert(document.getElementById("layer2").innerHTML);
functionmove(){
if(document.getElementById("layer1").scrollTop>=document.getElementById("layer2").offsetHeight){
document.getElementById("layer1").scrollTop-=(document.getElementById("layer2").offsetHeight-iFrame);
}
else{
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>
第二份代码
<SCRIPTlanguage="JavaScript">
varstrArray=newArray();
strArray[1]=""
+"<tablewidth=136border=0cellspacing=0cellpadding=0><tr><tdwidth=16height=20valign=top><imgsrc="/images/index_18.gif"mce_src="images/index_18.gif"width=12height=12vspace=5></td><tdwidth=120><atitle="中国自然资源学会第六次全国会员代表大会暨学术年会通知（第2号）（09.10）"target="_blank"href="moban/showCommonTopic.jsp?id=10560"mce_href="moban/showCommonTopic.jsp?id=10560">中国自然资源学会第六次全国会员代表大会暨学术年会通知（第2号）（09.10）</a></td></tr></table><tablewidth=43border=0cellspacing=0cellpadding=0><tr><tdheight=6></td></tr></table>"
+"<tablewidth=136border=0cellspacing=0cellpadding=0><tr><tdwidth=16height=20valign=top><imgsrc="/images/index_18.gif"mce_src="images/index_18.gif"width=12height=12vspace=5></td><tdwidth=120><atitle="“自适应空间信息可视化理论、技术与方法”研讨会征文通知（09.04）"target="_blank"href="moban/showCommonTopic.jsp?id=10557"mce_href="moban/showCommonTopic.jsp?id=10557">“自适应空间信息可视化理论、技术与方法”研讨会征文通知（09.04）</a></td></tr></table><tablewidth=43border=0cellspacing=0cellpadding=0><tr><tdheight=6></td></tr></table>"
+"<tablewidth=136border=0cellspacing=0cellpadding=0><tr><tdwidth=16height=20valign=top><imgsrc="/images/index_18.gif"mce_src="images/index_18.gif"width=12height=12vspace=5></td><tdwidth=120><atitle="中国科学院地理科学与资源研究所会计岗位招聘启事（09.03）"target="_blank"href="moban/showCommonTopic.jsp?id=10556"mce_href="moban/showCommonTopic.jsp?id=10556">中国科学院地理科学与资源研究所会计岗位招聘启事（09.03）</a></td></tr></table><tablewidth=43border=0cellspacing=0cellpadding=0><tr><tdheight=6></td></tr></table>"
strArray[0]=""
+"<tablewidth=136border=0cellspacing=0cellpadding=0><tr><tdwidth=16height=20valign=top><imgsrc="/images/index_18.gif"mce_src="images/index_18.gif"width=12height=12vspace=5></td><tdwidth=120><atitle="水问题论坛系列讲座——2009年第7讲（总第90讲）（09.01）"target="_blank"href="moban/showCommonTopic.jsp?id=10554"mce_href="moban/showCommonTopic.jsp?id=10554">水问题论坛系列讲座——2009年第7讲（总第90讲）（09.01）</a></td></tr></table><tablewidth=43border=0cellspacing=0cellpadding=0><tr><tdheight=6></td></tr></table>"
+"<tablewidth=136border=0cellspacing=0cellpadding=0><tr><tdwidth=16height=20valign=top><imgsrc="/images/index_18.gif"mce_src="images/index_18.gif"width=12height=12vspace=5></td><tdwidth=120><atitle="2009"中国科学院地理信息技术自主创新论坛暨SuperMapGIS技术大会（09.01）"target="_blank"href="moban/showCommonTopic.jsp?id=10553"mce_href="moban/showCommonTopic.jsp?id=10553">2009"中国科学院地理信息技术自主创新论坛暨SuperMapGIS技术大会（09.01）</a></td></tr></table><tablewidth=43border=0cellspacing=0cellpadding=0><tr><tdheight=6></td></tr></table>"
+"<tablewidth=136border=0cellspacing=0cellpadding=0><tr><tdwidth=16height=20valign=top><imgsrc="/images/index_18.gif"mce_src="images/index_18.gif"width=12height=12vspace=5></td><tdwidth=120><atitle="资源与环境信息系统国家重点实验室2009年招聘“有限元法”方向客座研究人员（08.07）"target="_blank"href="moban/showCommonTopic.jsp?id=10532"mce_href="moban/showCommonTopic.jsp?id=10532">资源与环境信息系统国家重点实验室2009年招聘“有限元法”方向客座研究人员（08.07）</a></td></tr></table><tablewidth=43border=0cellspacing=0cellpadding=0><tr><tdheight=6></td></tr></table>"
/*
showId=Math.floor(Math.random()*1);
tempStr=strArray[showId];
strArray[showId]=strArray[0];
strArray[0]=tempStr;
*/
</SCRIPT>
<SCRIPT>
vartimer;
document.write("<divid="icefable1"style="width:136;">"
+"<tablewidth=130;border=0cellspacing=0cellpadding=0>"
+"<tr><tdwidth=130;height=120style="padding-top:2px"mce_style="padding-top:2px"valign=top>"+strArray[1]+"</td></tr>"
+"<tr><tdwidth=130;height=120style="padding-top:2px"mce_style="padding-top:2px"valign=top>"+strArray[0]+"</td></tr>"
+"</table>"
+"</div>"
+"<divid="icefable2"style="position:absolute;visibility:hidden"mce_style="position:absolute;visibility:hidden"></div>");
/*
varmarqueesHeight=132;
varstopscroll=false;
icefable1.scrollTop=0;
*/
with(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);};
}
/*
varpreTop=0;
varcurrentTop=0;
varstoptime=0;
*/
functioninit_srolltext(){
icefable2.innerHTML="";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
timer=setInterval("move()",100);
}
functionmove(){
if(document.getElementById("icefable2").scrollTop>=document.getElementById("icefable1").offsetHeight)
document.getElementById("icefable2").scrollTop-=(document.getElementById("icefable1").offsetHeight-1);
else
ocument.getElementById("icefable2").scrollTop+=1;
}
init_srolltext();
functionscrollUp(){
if(stopscroll==true)return;
currentTop+=4;
if(currentTop==132)
{
stoptime+=4;
currentTop-=0;
}
else{
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>
相关文章
- javascript 基础_JavaScript高级编程
- JavaScript验证字符串是否包含英文字符、数字或者汉字代码实例详解编程语言
- JavaScript验证字符串只能包含数字或者英文字符的代码实例详解编程语言
- JavaScript 倒计时实例详解编程语言
- javascript三组文字间隙滚动实例代码
- javascript方法覆写实例代码
- JavaScript操作XML实例代码（获取新闻标题并分页，并分页）
- JavaScript设计模式富有表现力的Javascript（一）
- javascript中万恶的function实例分析
- javascript定时变换图片实例代码
- JavaScript验证码的实例代码(附效果图)
- jsp+javascript打造级连菜单的实例代码
- Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
- javascript实现TreeView无刷新展开的实例代码
- JavaScript根据数据生成百分比图和柱状图的实例代码
- JavaScript:Div层拖动效果实例代码
- javascript树形导航菜单实例代码
- javascript中简单的进制转换代码实例
- Javascript实现滚动图片新闻的实例代码
- javascript分页代码实例分享(js分页)
- JavaScript实现鼠标拖动元素实例代码
- Javascript排序算法之计数排序的实例
- JavaScript中实现PHP的打乱数组函数shuffle实例
- JavaScript字符串对象toUpperCase方法入门实例（用于把字母转换为大写）
- JavaScript中的原型和继承详解(图文)
- javascript中sort()的用法实例分析
- javascript中cookie对象用法实例分析
- javascript中2个感叹号的用法实例详解