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 相关文章推荐
js对象转json数组的简单实现案例
Feb 28 Javascript
javascript实用方法总结
Feb 06 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
Jquery获取radio选中的值
May 05 jQuery
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
VSCode 配置uni-app的方法
Jul 11 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 XML备份Mysql数据库
2009/05/27 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
php实现无限级分类
2014/12/24 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
js中的面向对象入门
2017/03/06 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
浅谈python中真正关闭socket的方法
2018/12/18 Python
深入理解Django-Signals信号量
2019/02/19 Python
python3安装crypto出错及解决方法
2019/07/30 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
一套C#面试题
2013/10/09 面试题
饭店工作计划书
2014/01/10 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL
Web应用开发TypeScript使用详解
2022/05/25 Javascript