js 文本在一行内幻灯显示效果

来源：互联网发布：木结构建筑优缺点知乎编辑：程序博客网时间：2024/06/06 19:26

程序代码
<div id="marqueeBox"><div>人的头脑太复杂,时间过得久,有时候连自己也被自己骗了,记下来才是最真实的......|最上等的控制是知道何时放手!</div></div>

<script type="text/javascript" src="TextSlide.js"></script>
<script type="text/javascript">
var Mar = new TextSlide("marqueeBox",4000,17);
Mar.init();
</script>

函数解释：

引用内容引用内容
TextSlide(Objid,Delay,hg,flag)

Objid:要幻灯显示的对象ID;

Delay:切换延迟时间;

hg:显示高度;

flag:可选,显示类型:滚动和淡出两种,默认是滚动;

TextSlide.js代码如下:
程序代码程序代码
//建立者:QQ:4641856 MSN:yourlips@hotmail.com
//功能:文字幻灯切换，flag可选，默认是滚动。

function TextSlide(Objid,Delay,hg,flag) {
var marqueeObj=document.getElementById(Objid);
var marqueeId=0;
var Opacity=0;//透明度
var Delay; //轮换延迟时间
var hg;//滚动延时
var marqueeText=marqueeObj.childNodes[0].innerHTML;
var marqueeContent=new Array();
var marqueeContent=marqueeText.split("|");
var marqueeInterval=new Array();
var obj=this;
this.init = function () {
var str=marqueeContent[0];
marqueeObj.childNodes[0].innerHTML=str;
marqueeObj.style.display="block";
marqueeObj.style.height=hg+"px";
marqueeId++;
marqueeInterval[0]=setInterval(obj.startMarquee,Delay);
}
marqueeObj.onmouseover=function(){
clearInterval(marqueeInterval[0]);
}
marqueeObj.onmouseout=function(){
marqueeInterval[0]=setInterval(obj.startMarquee,Delay)
}
this.startMarquee=function(){
var str=marqueeContent[marqueeId];
marqueeId++;
if(marqueeId>=marqueeContent.length) marqueeId=0;
if(marqueeObj.childNodes.length==1)
{
var nextLine=document.createElement('DIV');
nextLine.style.height=hg+"px";
nextLine.innerHTML=str;
marqueeObj.appendChild(nextLine);
}
else
{
marqueeObj.childNodes[0].innerHTML=str;
marqueeObj.childNodes[0].style.height=hg+"px";
marqueeObj.appendChild(marqueeObj.childNodes[0]);
marqueeObj.scrollTop=0;
}
clearInterval(marqueeInterval[1]);
if(flag=="Alpha"){
marqueeInterval[1]=setInterval(obj.doAlpha,20);
}
else{
marqueeInterval[1]=setInterval(obj.scrollMarquee,20);
}

}
this.scrollMarquee=function(){
marqueeObj.scrollTop++;
if(marqueeObj.scrollTop%hg==(hg-1)){
clearInterval(marqueeInterval[1]);
}
}
this.doAlpha = function(){
Opacity+=3;
marqueeObj.style.filter = "alpha(opacity="+Opacity+");";
marqueeObj.style.opacity=Opacity/100;
if ((Opacity+=3) > 90){
clearInterval(marqueeInterval[1]);
Opacity=0;
}
}

//class结束
}