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 相关文章推荐
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
公众号SVG动画交互实战代码
May 31 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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
Codeigniter的dom类用法实例
2015/06/26 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python集合用法实例分析
2015/05/30 Python
彻底理解Python list切片原理
2017/10/27 Python
Python实现购物车购物小程序
2018/04/18 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
2014年公司迎新年活动方案
2014/02/24 职场文书
竞聘演讲稿
2014/04/24 职场文书
工会主席事迹材料
2014/06/03 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
英文道歉信
2015/01/20 职场文书
简历自荐信范文
2015/03/09 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
angular异步验证器防抖实例详解
2022/03/31 Javascript