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


Posted in Javascript onApril 27, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
Three.js的使用及绘制基础3D图形详解
Apr 27 #Javascript
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 #Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 #Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 #Javascript
JavaScript实现反转字符串的方法详解
Apr 27 #Javascript
You might like
PHP安全编程之加密功能
2006/10/09 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
如何给Python代码进行加密
2020/01/10 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
公务员转正鉴定材料
2014/02/11 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers