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 静态页面实现随机显示广告的办法
Nov 17 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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函数strip_tags的一个bug浅析
2014/05/22 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
vue实现购物车功能(商品分类)
2020/04/20 Javascript
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
python基础教程之while循环
2019/08/14 Python
python判断链表是否有环的实例代码
2020/01/31 Python
python实现用户名密码校验
2020/03/18 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
机关领导干部作风整顿整改措施
2014/09/19 职场文书
文明倡议书
2015/01/19 职场文书
杜甫草堂导游词
2015/02/03 职场文书
个人年度总结报告
2015/03/09 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
MySQL transaction事务安全示例讲解
2022/06/21 MySQL
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python