文字效果

这是我为你们编写的一些示例代码，用于制作文本效果

<script>
//TEXT EFFECTS CODE WRITTEN BY iam_clint!
window.onload = doEffects;
var speed = 15; //lower the number the faster
var color_speed = 50; //speed at which colors change
var smoothing = 8; //the larger the number the less smooth but faster for sliding.
var font_smoothing = 1; //lower the number the smoother the font changes.
var start_top = 0;
var start_left = 0;
//setting global variables
var curele = "";
var slidedown = "";
var start_topSD = "";
var slideup = "";
var start_topSU = "";
var slideright = "";
var start_leftSR = "";
var slideleft = "";
var start_leftSL = "";
var zoomin = "";
var zoomout = "";
var start_zoomSize = "";
var start_zoomSize0 = "";
var colors = "";
var R = "00";
var G = "00";
var B = "00";
function doEffects() {
var elements = document.getElementsByTagName("DIV");
for (i=0; i<elements.length; i++) {
var c = elements[i].getAttribute("effect").split(",");
for (b=0; b<c.length; b++) {
//elements[i].getAttribute("effect")
    if (c[b] == "slidedown") { preset(elements[i]); start_topSD = elements[i].style.top; elements[i].style.top = 0; slidedown = window.setInterval("eSlideDown('"+curele+"')", speed); }
    if (c[b] == "slideup") { preset(elements[i]); start_topSU = elements[i].style.top; elements[i].style.top = document.documentElement.offsetHeight; slideup = window.setInterval("eSlideUp('"+curele+"')", speed); }
    if (c[b] == "slideright") { preset(elements[i]); start_leftSR = elements[i].style.left; elements[i].style.left = 0; slideright = window.setInterval("eSlideRight('"+curele+"')", speed); }
    if (c[b] == "slideleft") { preset(elements[i]); start_leftSL = elements[i].style.left;  start_topSD = elements[i].style.top; elements[i].style.left = document.documentElement.offsetWidth; slideleft = window.setInterval("eSlideLeft('"+curele+"')", speed); }
    if (c[b] == "zoomin") { preset(elements[i]); start_zoomSize = elements[i].style.fontSize; elements[i].style.fontSize = "0px"; zoomin = window.setInterval("eZoomIn('"+curele+"')", speed); }
    if (c[b] == "zoomout") { preset(elements[i]); start_zoomSizeO = elements[i].style.fontSize; elements[i].style.fontSize = "100px"; zoomout = window.setInterval("eZoomOut('"+curele+"')", speed); }
    if (c[b] == "colors") { preset(elements[i]); colors = window.setInterval("eColors('"+curele+"')", color_speed); }
}
}
} 
function preset(ele) {
 curele = ele.getAttribute("id");
}
function calcHex(val) { hex = val; if (val==10) { hex = "A"; } if (val==11) { hex = "B"; } if (val==12) { hex = "C"; } if (val==13) { hex = "D"; } if (val==14) { hex = "E"; } if (val==15) { hex = "F"; } return hex; }
function eSlideDown(eleid) { var ele = document.getElementById(eleid); if (parseFloat(ele.style.top)<parseFloat(start_topSD)) { ele.style.top = Math.floor(parseFloat(ele.style.top)+smoothing)+"px"; } else { ele.style.top = start_topSD; window.clearInterval(slidedown); } }
function eSlideUp(eleid) { var ele = document.getElementById(eleid); if (parseFloat(ele.style.top)>parseFloat(start_topSU)) { ele.style.top = Math.floor(parseFloat(ele.style.top)-smoothing)+"px"; } else { ele.style.top = start_topSU; window.clearInterval(slideup); } }
function eSlideLeft(eleid) { var ele = document.getElementById(eleid); if (parseFloat(ele.style.left)>parseFloat(start_leftSL)) { ele.style.left = Math.floor(parseFloat(ele.style.left)-smoothing)+"px"; } else { ele.style.left = start_leftSL; window.clearInterval(slideleft); } }
function eSlideRight(eleid) { var ele = document.getElementById(eleid); if (parseFloat(ele.style.left)<parseFloat(start_leftSR)) { ele.style.left = Math.floor(parseFloat(ele.style.left)+smoothing)+"px"; } else { ele.style.left = start_leftSR; window.clearInterval(slideright); } }
function eZoomIn(eleid) { var ele = document.getElementById(eleid); if (parseFloat(ele.style.fontSize)<parseFloat(start_zoomSize)) { ele.style.fontSize = Math.floor(parseFloat(ele.style.fontSize)+font_smoothing)+"px"; } else { ele.style.fontSize = start_zoomSize; window.clearInterval(zoomin); } }
function eZoomOut(eleid) { var ele = document.getElementById(eleid); if (parseFloat(ele.style.fontSize)>parseFloat(start_zoomSizeO)) { ele.style.fontSize = Math.floor(parseFloat(ele.style.fontSize)-font_smoothing)+"px"; } else { ele.style.fontSize = start_zoomSizeO; window.clearInterval(zoomout); } }
function eColors(eleid) { var ele = document.getElementById(eleid); R = calcHex(Math.floor(Math.random()*15))+''+calcHex(Math.floor(Math.random()*15)); G = calcHex(Math.floor(Math.random()*15))+''+calcHex(Math.floor(Math.random()*15)); B = calcHex(Math.floor(Math.random()*15))+''+calcHex(Math.floor(Math.random()*15)); ele.style.color = "#"+R+G+B; }
</script>
<!--<div name="txtEffect" effect="slideleft" id="id4" style="position: absolute; top: 50px; left: 500px;"><font color="red">This text should slide in from the right</font></div>
<div name="txtEffect" effect="slideleft" id="id5" style="position: absolute; top: 150px; left: 500px;"><font color="blue">This text should slide in from the right</font></div>
<div name="txtEffect" effect="slideleft" id="id6" style="position: absolute; top: 250px; left: 500px;"><font color="green">This text should slide in from the right</font></div>
<div name="txtEffect" effect="slideleft" id="id7" style="position: absolute; top: 350px; left: 500px;"><font color="orange">This text should slide in from the right</font></div>
<div name="txtEffect" effect="slideright" id="id8" style="position: absolute; top: 100px; left: 500px;"><font color="red">This text should slide in from the left</font></div>
<div name="txtEffect" effect="slideright" id="id9" style="position: absolute; top: 200px; left: 500px;"><font color="blue">This text should slide in from the left</font></div>
<div name="txtEffect" effect="slideright" id="id10" style="position: absolute; top: 300px; left: 500px;"><font color="green">This text should slide in from the left</font></div>
<div name="txtEffect" effect="slideright" id="id11" style="position: absolute; top: 400px; left: 500px;"><font color="orange">This text should slide in from the left</font></div>-->
<div name="txtEffect" effect="slidedown,colors" id="id1" style="position: absolute; top: 300px; left: 0px;">This text should slide down from the top and change colors</div>
<div name="txtEffect" effect="slideright" id="id3" style="position: absolute; top: 300px; left: 360px;"><font color="red">This text should slide in from the left</div>
<div name="txtEffect" effect="zoomout,slideleft" id="id4" style="position: absolute; top: 300px; left: 600px; font-size: 20px;"><font color="green">This text should slide in from the right and zoom out</div>
<div name="txtEffect" effect="zoomin,slideup,colors" id="id5" style="position: absolute; top: 500px; left: 300px; font-size: 40px;">This text should Zoom in to size (zoom in) and slide up and change colors</div> 

From: https://bytes.com/topic/javascript/insights/656110-text-effects