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 操作cookies及正确使用cookies的属性
Oct 15 Javascript
js 操作符实例代码
Oct 24 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
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中常用的字符串格式化函数总结
2014/11/19 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
js实现自定义路由
2017/02/04 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
Python实现读取文件最后n行的方法
2017/02/23 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
文艺演出策划方案
2014/06/07 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
顶岗实习协议书
2015/01/29 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers