当前位置:起点学习辅导网培训频道电脑知识学习网页制作Javascript教程js文本在一行内幻灯显示效果

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

08-08 00:40:50浏览次数:344栏目:Javascript教程
标签:javascript视频教程,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: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;//滚动延时http://bizhi.knowsky.com/   
    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)){    

[1] [2]  下一页

,js文本在一行内幻灯显示效果
《js文本在一行内幻灯显示效果》相关文章
给资讯打分:
网友评论: