JavaScript滚动新闻类

　2009-06-30 05:12:00　来源：WEB开发网　　　

核心提示：程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html

程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>滚动新闻类 - 51js.com - biyuan</title>
<style type="text/CSS">
body {
　 text-align:center;
}
td {
　 font-size:12px;
　 line-height:20px;
　 text-align:left;
}
.marquee {
　 width:100%;
　 height:100%;
　 overflow:hidden;
}
.m {
　 height:20px;
}
.m2 {
　 height:90px;
}
</style>
</head>
<body>
<table border='1'>
　 <tr>
　　　 <td height='20' width='250'><div id='marquee1' class='marquee m'></div></td>
　　　 <td height='20' width='300'><div id='marquee2' class='marquee m'></div></td>
　 </tr>
　 <tr>
　　　 <td height='99' colspan='2'>基本上够用了吧！</td>
　 </tr>
　 <tr>
　　　 <td height='90' colspan='2'><div id='marquee3' class='marquee m2'></div></td>
　 </tr>
</table>
<script language="javaScript">
function BYMarquee(){
　 this.Content = [];　 //显示内容
　 this.Speed = 20;　 //上移速度
　 this.Object = {};　 //http://www.cncms.com marquee容器对象
　 this.Pause = true;　 //是否停留
　 this.Start = function(){
　　　 var o = this.Object;
　　　 var Pause = this.Pause;
　　　 var Stop = false;
　　　 var Stop2 = false;
　　　 o.onmouSEOver = function(){
　　　　　 Stop = Stop2 = true;
　　　 }
　　　 o.onmouseout = function(){
　　　　　 Stop = Stop2 = false;
　　　 }
　　　 var BodyHtml = [];
　　　 for(var i in this.Content){
　　　　　 BodyHtml.push("<a href=\"" + this.Content[i].link + "\">" + this.Content[i].text + "</a>");
　　　 }
　　　 var Dv = document.createElement("div");
　　　 Dv.innerHTML = BodyHtml.join("<br />");
　　　 o.appendChild(Dv);
　　　 var DvHeight = Dv.offsetHeight;
　　　 while(Dv.offsetHeight /2 < o.offsetHeight){
　　　　　 Dv.innerHTML += "<br />" + Dv.innerHTML;
　　　 }
　　　 Dv.innerHTML += "<br />" + Dv.innerHTML;
　　　 setInterval(function(){
　　　　　 if(!Stop){
　　　　　　　 o.scrollTop ++;
　　　　　　　 if(o.scrollTop == o.scrollHeight - o.offsetHeight){
　　　　　　　　　 o.scrollTop = DvHeight - o.offsetHeight;
　　　　　　　 }
　　　　　　　 if(Pause){
　　　　　　　　　 if(o.scrollTop % o.offsetHeight == 0){
　　　　　　　　　　　 Stop = true;
　　　　　　　　　　　 setTimeout(function(){
　　　　　　　　　　　　　 Stop = Stop2;
　　　　　　　　　　　 }, 3000);
　　　　　　　　　 }
　　　　　　　 }
　　　　　 }
　　　 }, this.Speed);
　 }
}
//实例1
var marquee1 = new BYMarquee();
marquee1.Content = [
　 {link : '#', text : '英法国防部证实两国核潜艇相撞'},
　 {link : '#', text : '中国赴欧采购清单敲定涉及金额150亿元'}
];
marquee1.Object = document.getElementById('marquee1');
marquee1.Start();
//实例2
var marquee2 = new BYMarquee();
marquee2.Content = [
　 {link : '#', text : '剑仙李横握锋利嚣张的地铜剑，左右晃动'},
　 {link : '#', text : '你的奴隶【剑仙李】奋起反抗，被你狠狠地教训了一顿！'},
　 {link : '#', text : '我的奴隶 Su.新武将在奴隶市场输给了金光灿烂'}
];
marquee2.Speed = 10;
marquee2.Object = document.getElementById('marquee2');
marquee2.Start();
//实例3
var marquee3 = new BYMarquee();
marquee3.Content = [
　 {link : '#', text : '关于封装的方法之间调用的问题求助'},
　 {link : '#', text : '如何用Javascript来删除浏览器的历史记录？'},
　 {link : '#', text : '请高手帮忙破解一段代码'}
];
marquee3.Speed = 50;
marquee3.Pause = false;
marquee3.Object = document.getElementById('marquee3');
marquee3.Start();