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 相关文章推荐
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 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
截获网站title标签之家内容的例子
2006/10/09 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
php实现简单的上传进度条
2015/11/17 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
JS动画效果代码3
2008/04/03 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
Python处理字符串之isspace()方法的使用
2015/05/19 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
餐饮业的创业计划书范文
2013/12/26 职场文书
自我鉴定书面格式
2014/01/13 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
小学生家长寄语
2014/04/02 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
环境建议书
2015/02/04 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电