新闻滚动显示（单字显示）

今天看CSDN帖子的时候，有一篇介绍大庆企业在线（www.daqingnet.com）的。浏览时发现一个挺不错的功能：新闻标题滚动显示而且是单个字的显示。看下效果图：

唉，也看不出什么来。想看的话点链接就知道了。其实就是用Javascript脚本实现的，代码不多，功能实现的确不错。下面列出代码：

<html>
2

<!--
5

// ------ 定义全局变量
6

var theNewsNum;
7

var theAddNum;
8

var totalNum;
9

var CurrentPosion=0;
10

var theCurrentNews;
11

var theCurrentLength;
12

var theNewsText;
13

var theTargetLink;
14

var theCharacterTimeout;
15

var theNewsTimeout;
16

var theBrowserVersion;
17

var theWidgetOne;
18

var theWidgetTwo;
19

var theSpaceFiller;
20

var theLeadString;
21

var theNewsState;
22

function startTicker()
23

{
24

try { changeBgColor();} //引用该控件的页面包含的函数;
27

catch(err) {}
28

try{ startscroll();}
30

catch(err) {}
31

/*
33

if( typeof changeBgColor =="object") changeBgColor();
34

if( typeof startscroll !="object") startscroll();*/
35

// ------ 设置初始数值
37

theCharacterTimeout = 100;//字符间隔时间
38

theNewsTimeout = 2000;//新闻间隔时间
39

theWidgetOne = "_";//新闻前面下标符1
41

theWidgetTwo = "-";//新闻前面下标符
43

theNewsState = 1;
47

//theNewsNum = document.body.children.incoming.children.NewsNum.innerText;//新闻总条数
48

//add by lin
49

theNewsNum = document.getElementById("incoming").children.AllNews.children.length;//新闻总条数
50

theAddNum = document.getElementById("incoming").children.AddNews.children.length;//补充条数
51

totalNum =theNewsNum+theAddNum;
52

theCurrentNews = 0;
53

theCurrentLength = 0;
54

theLeadString = " ";
55

theSpaceFiller = " ";
56

runTheTicker();
57

}
58

// --- 基础函数
59

function runTheTicker()
60

{
61

if(theNewsState == 1)
62

{
63

if(CurrentPosion<theNewsNum){
64

setupNextNews();
65

}
66

else{
67

setupAddNews();
68

}
69

CurrentPosion++;
70

if(CurrentPosion>=totalNum||CurrentPosion>=5) CurrentPosion=0; //最多条数不超过5条
71

}
72

if(theCurrentLength != theNewsText.length)
73

{
74

drawNews();
75

}
76

else
77

{
78

closeOutNews();
79

}
80

}
81

// --- 跳转下一条新闻
82

function setupNextNews()
83

{
84

theNewsState = 0;
85

theCurrentNews = theCurrentNews % theNewsNum;
86

theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
87

theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.NewsLink.innerText;
88

theCurrentLength = 0;
89

document.all.hottext.href = theTargetLink;
90

theCurrentNews++;
91

}
92

function setupAddNews()
93

{
94

theNewsState = 0;
95

theCurrentNews = theCurrentNews % theAddNum;
96

theNewsText = document.getElementById("incoming").children.AddNews.children[theCurrentNews].children.Summary.innerText;
97

theTargetLink = document.getElementById("incoming").children.AddNews.children[theCurrentNews].children.NewsLink.innerText;
98

theCurrentLength = 0;
99

document.all.hottext.href = theTargetLink;
100

theCurrentNews++;
101

}
102

// --- 滚动新闻
103

function drawNews()
104

{
105

var myWidget;
106

if((theCurrentLength % 2) == 1)
107

{
108

myWidget = theWidgetOne;
109

}
110

else
111

{
112

myWidget = theWidgetTwo;
113

}
114

document.all.hottext.innerHTML = theLeadString + theNewsText.substring(0,theCurrentLength) + myWidget + theSpaceFiller;
115

theCurrentLength++;
116

setTimeout("runTheTicker()", theCharacterTimeout);
117

}
118

// --- 结束新闻循环
119

function closeOutNews()
120

{
121

document.all.hottext.innerHTML = theLeadString + theNewsText + theSpaceFiller;
122

theNewsState = 1;
123

setTimeout("runTheTicker()", theNewsTimeout);
124

}
125

window.onload=startTicker;
126

//-->
127

</script>
128

129

<body>
130

<table>
131

<tr>
132

<td>
133

<img height='14' alt='' src='/web/images/dian.gif' width='14'></td>
134

<td>
135

<font>新闻：</font></td>
136

<td valign='middle'>
137

<div height='14' id="visible">
138

<a href='' id="hottext" target='_blank'></a>
139

</div>
140

</td>
141

</tr>
142

</table>
143

<div id='incoming' style='display: none'>
144

<div id='AllNews'>
145

<div id='1'>
146

<div id='Summary'>
147

大庆日报记者专访曾玉康

.
148

</div>
149

<div id='NewsLink'>
150

http://www.lxqq.cn
151

</div>
152

</div>
153

<div id='2'>
154

<div id='Summary'>
155

盖如垠：以地企合作的新

.
156

</div>
157

<div id='NewsLink'>
158

/daqing/News/478.zdil
159

</div>
160

</div>
161

<div id='3'>
162

<div id='Summary'>
163

七次党代会代表平均年龄

.
164

</div>
165

<div id='NewsLink'>
166

/daqing/News/477.zdil
167

</div>
168

</div>
169

<div id='4'>
170

<div id='Summary'>
171

说话语声轻饭菜吃得干

.
172

</div>
173

<div id='NewsLink'>
174

/daqing/News/476.zdil
175

</div>
176

</div>
177

<div id='5'>
178

<div id='Summary'>
179

饭桌上肉类少、蔬菜多

.
180

</div>
181

<div id='NewsLink'>
182

/daqing/News/475.zdil
183

</div>
184

</div>
185

<div id='6'>
186

<div id='Summary'>
187

女亮丽男端庄代表们穿

.
188

</div>
189

<div id='NewsLink'>
190

/daqing/News/474.zdil
191

</div>
192

</div>
193

<div id='7'>
194

<div id='Summary'>
195

中共大庆市第七次代表大

.
196

</div>
197

<div id='NewsLink'>
198

/daqing/News/473.zdil
199

</div>
200

</div>
201

<div id='8'>
202

<div id='Summary'>
203

中共大庆市第七次代表大

.
204

</div>
205

<div id='NewsLink'>
206

/daqing/News/472.zdil
207

</div>
208

</div>
209

<div id='9'>
210

<div id='Summary'>
211

大庆欲再助举重双料冠军

.
212

</div>
213

<div id='NewsLink'>
214

/daqing/News/471.zdil
215

</div>
216

</div>
217

<div id='10'>
218

<div id='Summary'>
219

大庆交通局运管处彻查主

.
220

</div>
221

<div id='NewsLink'>
222

/daqing/News/470.zdil
223

</div>
224

</div>
225

</div>
226

<div id='AddNews'>
227

</div>
228

</div>
229

</body>
230

</html>
231

         注：1.若想修改链接的显示效果，以及target，则直接修改<a href='' id="hottext" target='_blank' style="text-decoration:none;"></a>就行了
                  2.table不能加袖手<table>就OK了否则效果出本来

posted on 2007-01-11 15:31 xpengfee 阅读(2112) 评论(0) 收藏举报