关于如何在网页内实现这种文本特效。。。

发布网友发布时间：2022-04-22 08:29

共2个回答

热心网友时间：2022-04-22 05:07

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="scrollText.js"></script>
</head>

<body>
<div id="scroollBox" style="border:1px solid red; ">
<div id="scroollBody">
这里是一些提示信息<br>
他可以自动向上循环的滚动<br>
每滚动一行，就会停下来休息一会<br>
当鼠标经过他的时候，他停止滚动<br>
当鼠标离开时，他继续滚动<br>
</div>
</div>
<script language="javascript" type="text/javascript">
var sample = new ScrollObj("scroollBody","scroollBox",36,300,19,50,50);
</script>
</body>
</html>

scrollText.js 部分

/********************************/

//*********不要修改这部分***************
//scrollBodyId: String 内部滚动div的id
//scrollBoxId: String 外面*div的id
//showHeight: Int *显示高度
//showWidth: Int *显示宽度
//lineHeight: Int 每行的高度
//stopTime: Int 间隔停止的时间（毫秒）
//speed: Int 滚动速度（毫秒，越小越快）
var ScrollObj = function(scrollBodyId,scrollBoxId,showHeight,showWidth,lineHeight,stopTime,speed) {
this.obj = document.getElementById(scrollBodyId);
this.box = document.getElementById(scrollBoxId);

this.style = this.obj.style;
this.defaultHeight = this.obj.offsetHeight;

this.obj.innerHTML += this.obj.innerHTML;
this.obj.style.position = "relative";

this.box.style.height = showHeight;
this.box.style.width = showWidth;
this.box.style.overflow = "hidden";

this.scrollUp = doScrollUp;

this.stopScroll = false;

this.curLineHeight = 0;
this.lineHeight = lineHeight;
this.curStopTime = 0;
this.stopTime = stopTime;
this.speed = speed;

this.style.top = lineHeight;

this.object = scrollBodyId + "Object";
eval(this.object + "=this");
setInterval(this.object+".scrollUp()",speed);
this.obj.onmouseover=new Function(this.object+".stopScroll=true");
this.obj.onmouseout=new Function(this.object+".stopScroll=false");
}
function doScrollUp(){
if( this.stopScroll == true )
return;
this.curLineHeight += 1;
if( this.curLineHeight >= this.lineHeight ){
this.curStopTime += 1;
if( this.curStopTime >= this.stopTime ){
this.curLineHeight = 0;
this.curStopTime = 0;
}
}
else{
this.style.top = parseInt(this.style.top) - 1;
if( -parseInt(this.style.top) >= this.defaultHeight ){
this.style.top = 0;
}
}
}
//***************这以上不要修改******************

热心网友时间：2022-04-22 06:25

http://www.gzsums.e.cn/webclass/html/marquee.html
marquee只在ie里有效,如果你不介意的话这是首选,方向可以自己定义.