• Heim > Web-Frontend > js-Tutorial > JavaScript网页制作特殊效果用随机数_典型特效

    JavaScript网页制作特殊效果用随机数_典型特效

    WBOY
    Freigeben: 2016-05-16 19:13:11
    Original
    1218 Leute haben es durchsucht

    网络世界精彩无比,绚丽的页面如果合理的使用特效,一定会增色不少。下面就是我总结的特效:
      跳动文字
      想看会跳舞的文字?来吧!
      代码:先在〈head〉和〈/head〉之间添加〈script language="JavaScript"〉
      〈!--
      function font11()
      //定义函数font11()
      {
      document.all.a1.style.fontSize=16+
      Math.floor(Math.random()*24); //调用Math.random()函数产生一个随机数,再利用Math.floor()函数产生小于或等于Math.random()*24的下一个数,来改变文字大小
      c1=Math.floor(Math.random()*256);
      c2=Math.floor(Math.random()*256);
      c3=Math.floor(Math.random()*256);
      document.all.a1.style.color="rgb("+c1+","+c2+","+c3+")"; //同上,改变文字颜色(利用RGB调色)
      timer=setTimeout('font11()',200); //每200毫秒调用一次font11()函数
      }
      ---〉〈/script〉
      再在〈body〉中加onLoad="font11();"
      最后在需要处加上〈span id="a1"〉飞〈/span〉
      特点:文字颜色及大小可随机的变化。
      延伸:可在网页中添加多组代码,其中font11 分别代表不同的文字,今后是font12 、font13 等等,文字可表现为每个都不同。
      图片淡入淡出
      随着时间的过去,图片也循环的由模糊到清晰改变。
      代码:先在〈head〉和〈/head〉之间添加〈script language="JavaScript"〉
      〈!--
      mark=0;
      function tupian() //建立函数tupian()
      {
      if(photo.filters.alpha.opacity〈10)
      //当图片透明度小于10时
      mark=1;
      if(photo.filters.alpha.opacity〉98)
      //当图片透明度大于98时
      mark=-1;
      step=2*mark;
      photo.filters.alpha.opacity+=step;
      //透明值计数器累加
      setTimeout('tupian()',20);
      //每隔20毫秒程序执行一次
      }
      ---〉〈/script〉
      再在图片属性中加id="photo"和style="filter:alpha(opacity=0;)"
      最后在那个图片代码的后面加上〈script〉〈!--
      tupian();
      ---〉〈/script〉
      特点:图片循环淡入淡出。
      本文的代码都非常简单,需要解释的地方我都有解释。

    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage