js文本在一行内幻灯显示效果
2009-06-30 05:23:00 来源:WEB开发网文字用"|"隔开,具体使用方法:
程序代码
<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.cncms.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)){
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结束
}
更多精彩
赞助商链接