JavaScript

超轻量级php框架startmvc

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

更新时间:2020-05-09 00:48:01 作者:startmvc
本文实例讲述了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 文字 透明度 闪烁