【前言】

在学习javascript的过程中我越来越喜欢做一些小例子来体验动态交互带来的快乐感，不仅让我对于javascript的学习不再那么的抗拒，也让对它越来越熟悉，一切都是在实践中成长！最近学习了一个特别的效果就是文字的特效

【内容】：

  文字的移动特效主要是通过了html语言的<marqueee>标签实现的，这是网页最常见的也是最多的一种动态的效果。但是注意Netscape浏览器中不支持这个标签。所以我们分为了两种情况来编写代码：一种：不考虑兼容性的问题；二种：考虑兼容性的问题。

代码的展示：

1.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>文字特效</title>
   <script src="Scripts/文字特效.js" type="text/javascript"></script>
</head>
<body>
    <p>
        <center>
       <font color="ffaafa"><h2>文字移动的效果——上下滚动的文字</h2></font>
     <hr width="300" />
    </p>
  <marquee direction="up" scrollAmount="3" style="width:400px; height:300px"><font face="Arial" color=#993366><strong><big>欢迎访问我的博客，虽然本人还是菜鸟，但是很认真的对待这个平台，希望在这个可以收获很多，也希望你们可以提出宝贵的建议</big></strong></font></marquee>
</center>
</body>
</html>

2.

//定义了的文本的宽度
        var MarqueeWidth = "400px";
        //文本的长度
        var MarqueeHeight ="300px";
        //文本移动的速度
        var speed = 3;
        var marqueecontents = '<font face="Arial" color=#993366><strong><big>欢迎访问我的博客，虽然本人还是菜鸟，但是很认真的对待这个平台，希望在这个可以收获很多，也希望你们可以提出宝贵的建议</big></strong></font>';
        if (document.all) { //当前文档的所有对象的娄组
            document.write('<marquee direction="up" scrollAmount=' + speed + ' style="width:+MarqueeWidth+"; height:' + MarqueeHeight + '">' + marqueecontents + '</marquee>')
            function regenerater() { //再生事件
                if (document.layers) { //Netscape 4.x专有的属性，是一个代表所有由储如<div><layer>等定位了的元素的数组
                    setTimeout("window.onersize=regenerater", 450);
                    intializemarquee;
                }
            }
            function intializemarquee() {
                document.MarqueeMessage001.document.MarqueeMessage002.document.write(marqueecontents);
                document.MarqueeMessage001.document.MarqueeMessage002.document.close();
                thelength = document.MarqueeMessage001.document.MarqueeMessage002.document.height;
                scrollText();
            }

            function scrollText() {
                if (document.MarqueeMessage001.document.MarqueeMessage002.top > thelength * (-1)) {
                    document.MarqueeMessage001.document.MarqueeMessage002.top = speed;
                }
                else {
                    document.MarqueeMessage001.document.MarqueeMessage002.top = MarqueeHeight
                    scrollText();
                }


            }
            window.onload = regenerater;
        }
<head runat="server">
    <title>文字特效</title>
   <script src="Scripts/文字特效.js" type="text/javascript"></script>
</head>
<body>
    <p>
        <center>
       <font color="ffaafa"><h2>文字移动的效果——上下滚动的文字</h2></font>
     <hr width="300" />
        
    </p>
      <ilayer name="MarqueeMessage001" width=&{Marqueewidth};height=&{MarqueeHeight};>
   <layer name="MarqueeMessage002" width=&{Marqueewidth} height=&{MarqueeHeight}></layer>
  </ilayer>
</body>



【实现效果图】

文字特效代码jquery javascript文字特效_html