网页特效 滚动字幕-公告栏滚动控制特效
要完成此效果需要两个步骤
第一步：把如下代码加入到<head>区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function verScroll(dir, spd, loop) {
loop = true;
direction = "up";
speed = 10;
scrolltimer = null;
if (document.layers) {
var page = eval(document.contentLayer);
}
else {
if (document.getElementById) {
var page= eval("document.getElementById( contentLayer ).style");
}
else {
if (document.all) {
var page = eval(document.all.contentLayer.style);
}
}
}
direction = dir;
speed = parseInt(spd);
var y_pos = parseInt(page.top);
if (loop == true) {
if (direction == "dn") {
page.top = (y_pos - (speed));
} else {
if (direction == "up" && y_pos < 10) {
page.top = (y_pos + (speed));
} else {
if (direction == "top") {
page.top = 10;
}
}
}
scrolltimer = setTimeout("verScroll(direction,speed)", 1);
}
}
function stopScroll() {
loop = false;
clearTimeout(scrolltimer);
}
// End -->
</script>
第二步：把如下代码加入到<body>区域中
<div id="contentLayer" style="position:absolute; width:300px; z-index:1; left: 39px; top: 51px">
aaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbb
ccccccccccccccccccccccccc
ddddddddddddddddddddddddd
eeeeeeeeeeeeeeeeeeeeeeeee
rrrrrrrrrrrrrrrrrrrrrrrr
ffffffffffffffffffffffg
ggggggggggggggggggggggggg
hhhhhhhhhhhhhhhhhhhhhhhhe
eeeeeeeeeeeeeeeeeeeeeee
</div>
<div id="scrollmenu" style="position:absolute;width:236px;height:30px;z-index:1; left:328px; top: 44px">
<table border=1><tr><td>
<table>
<tr>
<td align=left>Up</td>
<td> </td>
<td align=right>Down</td>
</tr>
<tr>
<td colspan=3>
<a href="#" onMouseOver="verScroll( up , 25 , true )" onMouseOut="stopScroll()"><<<</a>
<a href="#" onMouseOver="verScroll( up , 5 , true )" onMouseOut="stopScroll()"><<</a>
<a href="#" onMouseOver="verScroll( up , 1 , true )" onMouseOut="stopScroll()"><</a> |
<a href="#" onMouseOver="verScroll( dn , 1 , true )" onMouseOut="stopScroll()">></a>
<a href="#" onMouseOver="verScroll( dn , 5 , true )" onMouseOut="stopScroll()">>></a>
<a href="#" onMouseOver="verScroll( dn , 25 , true )" onMouseOut="stopScroll()">>>></a>
</td>
</tr>
</table>
</td></tr></table>
</div>