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 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
实例讲解React 组件
Jul 07 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求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
python hough变换检测直线的实现方法
2019/07/12 Python
python gdal安装与简单使用
2019/08/01 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
应届毕业生求职信范文
2013/12/18 职场文书
学生打架检讨书
2014/02/14 职场文书
家长给学校的建议书
2014/05/15 职场文书
2014年派出所工作总结
2014/11/21 职场文书
中学生自我评价2015
2015/03/03 职场文书
硕士论文致谢范文
2015/05/14 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL