快捷導(dǎo)航

JavaScript通過改變文字透明度實(shí)現(xiàn)的文字閃爍效果實(shí)例

更新時(shí)間：2017年04月27日 15:06:02 作者：David_黎

這篇文章主要介紹了JavaScript通過改變文字透明度實(shí)現(xiàn)的文字閃爍效果,結(jié)合完整實(shí)例形式分析了javascript基于定時(shí)器周期性動態(tài)修改頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript通過改變文字透明度實(shí)現(xiàn)的文字閃爍效果。分享給大家供大家參考，具體如下：

運(yùn)行效果圖如下：

完整實(shí)例代碼如下：

<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>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

淺析微信小程序自定義日歷組件及flex布局最后一行對齊問題
這篇文章主要介紹了微信小程序自定義日歷組件及flex布局最后一行對齊問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-10-10
JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理
這篇文章主要介紹了JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下
2022-07-07
JS 按鈕點(diǎn)擊觸發(fā)(兼容IE、火狐)
這篇文章介紹了JS 按鈕點(diǎn)擊觸發(fā)，有需要的朋友可以參考一下
2013-08-08
在js(jquery)中獲得文本框焦點(diǎn)和失去焦點(diǎn)的方法
文章介紹兩個(gè)方法和種是利用javascript onFocus onBlur來判斷焦點(diǎn)和失去焦點(diǎn)，加一種是利用jquery $("p").blur(); 或$("p").blur(fn)來實(shí)現(xiàn)，有需要的朋友可以參考一下
2012-12-12
微信小程序的開發(fā)范式BeautyWe.js入門詳解
這篇文章主要介紹了微信小程序的開發(fā)范式BeautyWe.js詳解，它是一套專注于微信小程序的企業(yè)級開發(fā)范式，它的愿景是：讓企業(yè)級的微信小程序項(xiàng)目中的代碼，更加簡單、漂亮,需要的朋友可以參考下
2019-07-07
uni-app集成使用SQLite數(shù)據(jù)庫的方法步驟
這篇文章主要介紹了uni-app集成使用SQLite數(shù)據(jù)庫的相關(guān)資料,包括勾選SQLite選項(xiàng)、封裝sqlite.js文件以及在使用時(shí)注意的事項(xiàng),文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
微信小程序bindinput與bindsubmit的區(qū)別實(shí)例分析
這篇文章主要介紹了微信小程序bindinput與bindsubmit的區(qū)別,結(jié)合實(shí)例形式分析了微信小程序bindinput與bindsubmit的具體功能、用法及相關(guān)使用區(qū)別,需要的朋友可以參考下
2019-04-04
javascript 定時(shí)器工作原理分析
說到 javascript 中的定時(shí)器，我們肯定會想到 setTimeout() 和 setInterval() 這兩個(gè)函數(shù)。本文將從事件循環(huán)（Event Loop）的角度來分析兩者的工作原理和區(qū)別
2016-12-12
avascript中的自執(zhí)行匿名函數(shù)應(yīng)用示例
javascript中的自執(zhí)行匿名函數(shù)可以用它創(chuàng)建命名空間，只要把自己所有的代碼都寫在這個(gè)特殊的函數(shù)包裝內(nèi)，那么外部就不能訪問，除非你允許
2014-09-09
JavaScript中Object.prototype.toString方法的原理
這篇文章主要介紹了JavaScript中Object.prototype.toString方法的原理的相關(guān)資料,需要的朋友可以參考下
2016-02-02