当前位置导航:炫浪网>>网络学院>>网页制作>>JavaScript教程

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

文字用"|"隔开,具体使用方法:


 程序代码
<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:[email protected]   
//功能:文字幻灯切换,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结束   

相关内容
赞助商链接