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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
vue 实现图片懒加载功能
Dec 31 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
wxPython窗口的继承机制实例分析
2014/09/28 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
python机器人运动范围问题的解答
2019/04/29 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
Sony C++笔试题
2013/03/10 面试题
应届生自我鉴定
2013/12/11 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
论文答谢词
2015/01/20 职场文书
工作简历自我评价
2015/03/11 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书