网站常用的几种文字滚动切换显示特效

这几种文字滚动切换显示特效是目前许多网站都用到的文字滚动特效，边滚动边切换显示，结合自己的需求来修改即可。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<SCRIPT language=JavaScript1.2>
var strFaderName = 'Dynamic Text Fader 2.20';
var strCopyright = 'Copyright (c) Nicholas Poh 2000';
// Check for browser and version
var g_fBrowser = 0;
var navName = navigator.appName;
var navVer  = parseFloat(navigator.appVersion);
if (document.all) {
// Microsoft Internet Explorer 5 or compatible
g_fBrowser = 2;
} else if (document.getElementById) {
// Netscape 6 or DOM compatible browser
g_fBrowser = 3;
} else if (document.layers) {
// Netscape 4 or compatible
g_fBrowser = 1;
} else {
// Sometimes Netscape 4 reaches here. So, make sure it still works.
if (navName == "Netscape" && navVer >= 4) {
g_fBrowser = 1;
} else {
// unknown and not supported
g_fBrowser = 0;
}
}
// End of check
// Global variables
var DynFaderList = new Array();// List of Dynamic Faders
// End of Global variables
// Create a hex convertor array (Dex2Hex[])
var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
var value=0;
var Dec2Hex=new Array();
for (x=0; x<16; x++){
for (y=0; y<16; y++){
Dec2Hex[value]= hexbase[x] + hexbase[y];
value++;
}
}
// End of create a hex convertor array (Dex2Hex[])
// Combine RGB colour
function RGB(r, g, b)
{
return ((r&0xFF)<<16) + ((g&0xFF)<<8) + (b&0xFF);
}
// Convert RGB colour from string to numeric
function StrRGB2Num(color)
{
var temp;
temp = color;
return Number('0x'+temp.substr(1,temp.length));
}
// Convert RGB colour to string base
function RGB2STR(rgbcolor)
{
return Dec2Hex[rgbcolor>>16] + Dec2Hex[(rgbcolor>>8)&0xFF] + Dec2Hex[rgbcolor&0xFF];
}
// Find layer
function findLayer(name, doc)
{
if (document.layers) {
var i, layer;
for (i = 0; i < doc.layers.length; i++) {
layer = doc.layers[i];
if (layer.name == name) return layer;
if (layer.document.layers.length > 0) {
layer = findLayer(name, layer.document);
if (layer != null) return layer;
}
}
}
return null;
}
// Change the HTML text
function changeHTMLText(element, newText, object)
{
if (document.all) {
// Microsoft Internet Explorer 5 or compatible
element.innerHTML = newText;
} else if (document.getElementById) {
// Netscape 6 or DOM compatible browser
rng = document.createRange();
rng.setStartBefore(element);
htmlFrag = rng.createContextualFragment(newText);
while (element.hasChildNodes()) element.removeChild(element.lastChild);
element.appendChild(htmlFrag);
} else if (document.layers) {
// Netscape 4 or compatible
strTemp = '<DIV CLASS="' + object.name + '">' + newText + '</DIV>';
element.document.open();
element.document.fgColor = object.curcolor & 0xFFFFFF;
element.document.writeln(strTemp);
element.document.close();
}
}
function insertPlaceHolder(strName, width, height, align, bgcolor, border, bordercolor)
{
if (String(width)  =="undefined") var width   = "100%";
if (String(height) =="undefined") var height  = 100;
if (String(align)  =="undefined") var align   = "left";
if (String(bgcolor)=="undefined") var bgcolor = "";
if (String(border) =="undefined") var border  = 0;
if (String(bordercolor)=="undefined") var bordercolor = "";
if (g_fBrowser == 0) {
document.writeln("Browser not supported");
return;
}
switch(g_fBrowser) {
case 1:
document.writeln(
'<TABLE ALIGN="' + align + '" CELLSPACING="0" CELLPADDING="0" BORDER="' + border + '" BORDERCOLOR="' + bordercolor + '">' +
'<TR><TD>' +
'<ILAYER NAME="' + strName + '" BGCOLOR="' + bgcolor + '" VISIBILITY="inherit">' +
'<LAYER NAME="Content" WIDTH=' + width + ' HEIGHT=' + height + ' VISIBILITY="inherit">' +
'</LAYER>' +
'</ILAYER>' +
'</TD></TR>' +
'</TABLE>'
);
break;
case 2:
case 3:
document.writeln(
'<DIV ALIGN=' + align + '>' +
'<DIV ID="'+strName+'" STYLE="width:' + width +'; height:' + height + '; overflow:hidden; background:'+bgcolor+'; border-style:outset; border-width:'+border+'; border-color:'+bordercolor+'">' +
'<DIV ID="'+strName+'Content" STYLE="position:relative; width:100%;">' +
'</DIV>' +
'</DIV>' +
'</DIV>'
);
break;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function DynFader()
{
this.name;
this.width;
this.height;
this.contentHeight;
this.offset  = 20;
this.curXPos = 0;
this.curYPos = -this.offset;
this.curPos = 0;
this.midYPos = 0;
this.ydir = 1;
this.xdir = 0;
this.placeholder;
this.content;
this.text = new Array();
this.curText = -1;
this.loop = -1;
this.paused = true;
this.started = false;
this.pauseInterval = 0;
this.pauseTextInterval = 0;
this.curpauseInterval = 0;
this.fgcolor  = 0x000000;
this.bgcolor  = 0xFFFFFF;
this.dfcolor  = 0;
this.curdfcolor  = 0;
this.curcolor = 0;
this.dfRed   = 0;
this.dfGreen = 0;
this.dfBlue  = 0;
this.isFade = false;
// Define methods
this.addText = DynFaderAddText;
this.attachPlaceHolder = DynFaderAttachPlaceHolder;
this.setTextColor = DynFaderSetTextColor;
this.start = DynFaderStart;
this.stop = DynFaderStop;
this.beginFade = DynFaderBeginFade;
this.calcColorDif = DynFaderCalcColorDif;
this.getColorDif = DynFaderGetColorDif;
this.setFont = DynFaderSetFont;
this.setFontSize = DynFaderSetFontSize;
this.setBackground = DynFaderSetBackground;
this.setDirection = DynFaderSetDirection;
this.setSpeed = DynFaderSpeed;
this.setPauseMidInterval = DynFaderSetPauseMidInterval;
this.setPauseTextInterval = DynFaderSetPauseTextInterval;
this.getContentHeight = DynFaderGetContentHeight;
this.setLoop = DynFaderSetLoop;
this.setGlow = DynFaderSetGlow;
DynFaderList[DynFaderList.length] = this;
}
function DynFaderAddText(newText)
{
this.text[this.text.length] = newText;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function DynFaderAttachPlaceHolder(strPlaceHolder)
{
switch(g_fBrowser) {
case 1:
this.name = strPlaceHolder;
this.placeholder = findLayer(strPlaceHolder, document);
this.content = this.placeholder.document.Content;
this.width   = this.placeholder.clip.width;
this.height  = this.placeholder.clip.height;
this.content.top = this.curYPos;
break;
case 2:
this.placeholder = eval('document.all.' + strPlaceHolder);
this.content = eval('document.all.' + strPlaceHolder+'Content');
this.width   = this.placeholder.style.pixelWidth;
this.height  = this.placeholder.style.pixelHeight;
this.content.style.pixelTop = this.curYPos;
break;
case 3:
this.placeholder = document.getElementById(strPlaceHolder);
this.content = document.getElementById(strPlaceHolder+'Content');
this.width   = parseInt(this.placeholder.style.width);
this.height  = parseInt(this.placeholder.style.height);
this.content.style.top = this.curYPos;
break;
}
}
function DynFaderSetTextColor(r, g, b)
{
this.fgcolor = RGB(r, g, b);
switch(g_fBrowser) {
case 1:
this.content.document.fgColor = this.fgcolor;
break;
case 2:
this.content.style.color = this.fgcolor;
break;
case 3:
this.content.style.color = "#" + RGB2STR(this.fgcolor);
break;
}
}
function DynFaderSetTextColor(strColor)
{
if (isNaN(strColor)) this.fgcolor = StrRGB2Num(strColor);
this.curcolor = this.fgcolor;
switch(g_fBrowser) {
case 1:
this.content.document.fgColor = this.color;
break;
case 2:
this.content.style.color = this.fgcolor;
break;
case 3:
this.content.style.color = "#" + RGB2STR(this.fgcolor);
break;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function DynFaderStart()
{
if (this.ydir > 0) {
this.curYPos = this.height + 1;
} else {
this.curYPos = -this.getContentHeight() - 1;
}
this.started = true;
}
function DynFaderStop()
{
this.started = false;
}
function DynFaderBeginFade()
{
this.calcColorDif();
this.isFade = true;
this.start();
}
function DynFaderCalcColorDif()
{
switch(g_fBrowser) {
case 1:
this.bgcolor = this.placeholder.bgColor;
if (this.bgcolor == null) this.bgcolor = StrRGB2Num(document.bgColor);
break;
case 2:
case 3:
this.bgcolor = StrRGB2Num(this.placeholder.style.backgroundColor);
if (isNaN(this.bgcolor)) this.bgcolor = StrRGB2Num(document.bgColor);
break;
}
this.dfRed   = ((this.bgcolor>>16) - (this.fgcolor>>16));
this.dfGreen = (((this.bgcolor>>8)&0xFF) - ((this.fgcolor>>8)&0xFF));
this.dfBlue  = ((this.bgcolor&0xFF) - (this.fgcolor&0xFF));
this.curcolor = this.bgcolor;
}
function DynFaderGetColorDif(steps)
{//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
steps  += this.height;
steps >>= 1;
steps  /= Math.abs(this.ydir);
this.curdfcolor = this.dfcolor = -(((this.dfRed/steps)<<16) + ((this.dfGreen/steps)<<8) + (this.dfBlue/steps));
}
function DynFaderSetFont(fontfamily, fontweight, textalign)
{
switch(g_fBrowser) {
case 1:
if (fontfamily) document.classes[this.name].all.fontFamily = fontfamily;
if (fontweight) document.classes[this.name].all.fontWeight = fontweight;
if (textalign)  document.classes[this.name].all.textAlign = textalign;
break;
case 2:
case 3:
if (fontfamily) this.content.style.fontFamily = fontfamily;
if (fontweight) this.content.style.fontWeight = fontweight;
if (textalign)  this.content.style.textAlign  = textalign;
break;
}
}
function DynFaderSetFontSize(fontsize)
{
// Unit is required for Netscape 6
if (!isNaN(fontsize)) fontsize += 'pt';
switch(g_fBrowser) {
case 1:
if (fontsize) document.classes[this.name].all.fontSize = fontsize;
break;
case 2:
this.content.style.fontSize = fontsize;
break;
case 3:
this.content.style.fontSize = fontsize;
break;
}
}
function DynFaderSetBackground(image)
{
switch(g_fBrowser) {
case 1:
this.placeholder.background.src = image;
break;
case 2:
case 3:
this.placeholder.style.backgroundImage = 'url('+image+')';
break;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function DynFaderSetDirection(iDir)
{
switch(iDir) {
case 0:
this.ydir = Math.abs(this.ydir);
break;
case 1:
this.ydir = -Math.abs(this.ydir);
break;
default:
this.ydir = Math.abs(this.ydir);
}
}
function DynFaderSpeed(Speed)
{
if (this.ydir > 0) {
this.ydir = Math.abs(Speed);
} else {
this.ydir = -Math.abs(Speed);
}
}
function DynFaderSetPauseMidInterval(time)
{
this.pauseInterval = Math.abs(time);
}
function DynFaderSetPauseTextInterval(time)
{
this.pauseTextInterval = Math.abs(time);
}
function DynFaderGetContentHeight()
{
switch(g_fBrowser) {
case 1:
this.contentHeight = this.content.document.height;
break;
case 2:
this.contentHeight = this.content.clientHeight;
break;
case 3:
this.contentHeight = this.content.offsetHeight;
break;
}
return this.contentHeight;
}
function DynFaderSetLoop(loops)
{
this.loop = loops;
}
function DynFaderSetGlow(strength, glowColor, fgColor)
{
switch(g_fBrowser) {
case 1:
break;
case 2:
if (String(fgColor) != "undefined") this.setTextColor(fgColor);
this.content.style.filter = "glow(color="+glowColor+",strength="+strength+")";
break;
case 3:
break;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
// Scrolling section
function ScrollFader()
{
var fader;
if (String(DynFaderList[0]) == "undefined") return;
for (var i in DynFaderList) {
fader = DynFaderList[i];
if (fader.started == false) continue;
if (fader.paused) {
if (fader.curpauseInterval-- <= 0) {
fader.paused = false;
}
} else {
fader.curYPos += fader.ydir;
//fader.curXPos += fader.xdir;
if (fader.curYPos == fader.midYPos) {
if (fader.pauseInterval) {
fader.curpauseInterval = fader.pauseInterval;
fader.paused = true;
}
fader.curYPos = (fader.height - fader.contentHeight) >> 1;
if (fader.isFade) {
fader.curdfcolor = -fader.dfcolor;
fader.curcolor = fader.fgcolor;
}
}
if (fader.isFade) {
// Change text colour
switch(g_fBrowser) {
case 1:
if (fader.curText >= 0) {
changeHTMLText(fader.content, fader.text[fader.curText], fader);
}
break;
case 2:
fader.content.style.color = fader.curcolor;
break;
case 3:
fader.content.style.color = "#" + RGB2STR(fader.curcolor);
break;
}
fader.curcolor+= fader.curdfcolor;
}
if (fader.curYPos > fader.height || fader.curYPos < -fader.contentHeight) {
// Prepare for next text
var ShowCopyright = false;
if (++fader.curText > fader.text.length - 1) {
// End of text array reached
fader.curText = 0;
if (this.loop == -1) {
// infinite loop
if (Math.round(Math.random()*20) == 7) {
ShowCopyright = true;
fader.curText = -1;
}
} else {
if (--fader.loop == 0) {
// Last loop reached
fader.stop();
}
}
}
// Rewrite the text
switch(g_fBrowser) {
case 1:
fader.content.top = fader.height;
break;
case 2:
fader.content.style.pixelTop = fader.height;
case 3:
fader.content.style.top = fader.height;
break;
}
if (ShowCopyright) {
changeHTMLText(fader.content, strFaderName + '<BR>' + strCopyright, fader);
} else {
changeHTMLText(fader.content, fader.text[fader.curText], fader);
}
// Reset values
fader.getContentHeight();
if (fader.isFade) {
fader.getColorDif(fader.contentHeight);
fader.curcolor = fader.bgcolor;
}
if (fader.ydir > 0) {
fader.midYPos = ((fader.height - fader.contentHeight) >> 1) + fader.contentHeight;
fader.midYPos = (Math.round(fader.midYPos / fader.ydir) * fader.ydir) - fader.contentHeight;
fader.curYPos = -fader.contentHeight;
} else {
fader.midYPos = ((fader.height - fader.contentHeight) >> 1) + fader.height;
fader.midYPos = (Math.round(fader.midYPos / fader.ydir) * fader.ydir) - fader.height;
fader.curYPos = fader.height;
}
if (fader.pauseTextInterval) {
fader.curpauseInterval = fader.pauseTextInterval;
fader.paused = true;
}
}
// Scroll text
switch(g_fBrowser) {
case 1:
fader.content.top = fader.curYPos;
break;
case 2:
fader.content.style.pixelTop = fader.curYPos;
break;
case 3:
fader.content.style.top = fader.curYPos;
break;
}
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
// Start timer
var g_timerID;
if (g_fBrowser == 1) {
var g_winWidth;
var g_winHeight;
g_winWidth  = window.innerWidth;
g_winHeight = window.innerHeight;
window.captureEvents(Event.RESIZE);
window.onResize = FaderReload;
}
setTimeout('FaderStart()', 600);
function FaderStart()
{
g_timerID = setInterval(ScrollFader, 20);
window.onUnload = FaderUnload;
}
function FaderUnload(e)
{
clearInterval(g_timerID);
return window.routeEvent(e);
}
function FaderReload(e)
{
if (g_winWidth == window.innerWidth && g_winHeight == window.innerHeight) return;
this.location.href = this.location.href;
this.focus();
return window.routeEvent(e);;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</SCRIPT>
<SCRIPT language=JavaScript1.2>
function runMe()
{
// create fader
var myFader1 = new DynFader();
// add text
myFader1.addText('This is the first fader');
myFader1.addText('Image as background?');
myFader1.attachPlaceHolder("FaderWithBackground");
myFader1.setBackground('toad.gif');
myFader1.setFont('Comic Sans MS', 'bold', 'center');
myFader1.setFontSize(15);
myFader1.setTextColor('#0000FF');
myFader1.beginFade();
// create fader
var myFader2 = new DynFader();
// add text
myFader2.addText('This is the second fader');
myFader2.addText('The background is transparent');
myFader2.addText('Code downloaded from hWinMain List');
// initialize fader
myFader2.attachPlaceHolder("FaderWithTransparentBackground");
myFader2.setDirection(1);
myFader2.setTextColor('#FF00FF');
myFader2.setFont('Verdana', 'bold', 'center');
myFader2.setSpeed(4);
myFader2.setPauseMidInterval(30);
myFader2.setPauseTextInterval(10);
myFader2.beginFade();
// create fader
var myFader3 = new DynFader();
// add text
myFader3.addText('This is the third fader');
myFader3.addText('The background is green');
myFader3.addText('Yes! I have border!');
// initialize fader
myFader3.attachPlaceHolder("FaderWithColourBackground");
myFader3.setTextColor('#0000FF');
myFader3.setFont('Verdana', 'bold', 'center');
myFader3.setSpeed(4);
myFader3.setPauseMidInterval(30);
myFader3.setPauseTextInterval(10);
myFader3.start();
// create fader
var myFader4 = new DynFader();
// add text
myFader4.addText('This is the fourth fader without fading effect');
if (document.all)
myFader4.addText("Hey! I'm glowing!");
else
myFader4.addText("Sigh... I'm not glowing (Netscape)");
myFader4.addText('The background is black');
myFader4.addText('<DIV ALIGN=LEFT>Left aligned</DIV>');
myFader4.addText('<DIV ALIGN=CENTER>Center aligned</DIV>');
myFader4.addText('<DIV ALIGN=RIGHT>Right aligned</DIV>');
// initialize fader
myFader4.attachPlaceHolder("FaderNoFade");
myFader4.setTextColor('#9FA06F');
myFader4.setTextColor('#ffffff');
myFader4.setFont('Verdana', 'bold', 'center');
myFader4.setGlow(5, 'white', 'yellow');
myFader4.setDirection(1);
myFader4.setPauseMidInterval(30);
myFader4.start();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</SCRIPT>
<body bgcolor="#fef4d9" onload=runMe();>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<TABLE align=center border=2 cellPadding=2 cellSpacing=2 width=640>
  <TBODY>
  <TR>
    <TD>
      <SCRIPT>insertPlaceHolder("FaderWithBackground", 640, 50, 'center')</SCRIPT>
    </TD></TR>
  <TR>
    <TD>
      <TABLE border=1 cellPadding=1 cellSpacing=1 width="100%">
        <TBODY>
        <TR>
          <TD bgColor=yellow width=200>
            <B>警告:</B><BR>
            如果你使用的是NS浏览器的话，你的显示会变得很慢，这些显示效果不错吧~_~武鸣人欢迎您！
</TD>
          <TD>
            <TABLE border=0 cellPadding=2 cellSpacing=2 width="100%">
              <TBODY>
              <TR>
                <TD>
                  <SCRIPT>insertPlaceHolder("FaderWithTransparentBackground", 300, 50, 'center')</SCRIPT>
                </TD></TR>
              <TR>
                <TD>
                  <HR SIZE=2>
                </TD>
              <TR>
                <TD>
                  <SCRIPT>insertPlaceHolder("FaderWithColourBackground", 300, 50, 'center', '#00FF00', 4, 'green')</SCRIPT>
                </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>
  <TR>
    <TD>
      <SCRIPT>insertPlaceHolder("FaderNoFade", 640, 20, 'center', '#000000')</SCRIPT>
</TD>
</TR>
</TBODY>
</TABLE>
</body>