网络编程
位置:首页>> 网络编程>> JavaScript>> JavaScript通过改变文字透明度实现的文字闪烁效果实例

JavaScript通过改变文字透明度实现的文字闪烁效果实例

作者:David_黎  发布时间:2024-04-16 09:13:28 

标签:JavaScript,文字,透明度,闪烁

本文实例讲述了JavaScript通过改变文字透明度实现的文字闪烁效果。分享给大家供大家参考,具体如下:

运行效果图如下:

JavaScript通过改变文字透明度实现的文字闪烁效果实例

完整实例代码如下:


<html>
<head>
<meta charset="utf-8">
<title>JS文字闪烁</title>
   <style type="text/css">
     .title
     {
       font-size:50px;
       font-family:Arial black;
       filter:alpha(opacity=10);
     }
   </style>
   <script type="text/javascript">
     function $(id)
     {
       return document.getElementById(id);
     };
     function changeOpacity()
     {
       var direction=-1;
       var opacityValue=100;
       function doChange()
       {
         if(++opacityValue>=100)
         {
           direction=-1;
         }
         if(--opacityValue<=0)
         {
           direction=1;
         }
         opacityValue+=direction;
         $("t1").style.filter="alpha(opacity="+opacityValue+")";
         $("t1").style.opacity=opacityValue/100;
       };
       setInterval(doChange,10);
     };
   </script>
 </head>
 <body onload="changeOpacity()">
   <table id="t1" class="title"><tr><td>Hi,I'm content for text</tr></table>
 </body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com