JS實(shí)現(xiàn)很酷的水波文字特效實(shí)例
更新時(shí)間：2015年02月26日 11:18:06 作者：代碼家園
這篇文章主要介紹了JS實(shí)現(xiàn)很酷的水波文字特效,實(shí)例分析了javascript操作圖層特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)很酷的水波文字特效。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>JS實(shí)現(xiàn)很酷的水波文字效果</title>
</head>
<body bgcolor="#000000" onLoad="if (document.all)wave()">
<center>
<div id='water' style='position:relative;width:400px;height:150px;font-family:Verdana;font-size:50px;color:#8080ff'>
</div>
</center>
<script language="javascript">
<!--
if (document.layers){ //如果是NS
alert("你的瀏覽器不支持這個(gè)特效"); //做出提示
}
else //否則(不是NS)
if (document.all){ //并且是IE的話
var step=3; //設(shè)定改變效果的步長
var xstep=0;
var msg='歡迎光臨<br>腳本之家<br>jb51.cn';
water.innerHTML=msg //設(shè)定效果圖層的內(nèi)容
function wave(){
//這句用來設(shè)定圖層的style,其中濾鏡的phase屬性根據(jù)xstep的值動(dòng)態(tài)設(shè)定。
document.all.water.style.filter='wave(freq=3, strength=5, phase='+xstep+', lightstrength=45, add=0, enabled=1)';
xstep+=step;
//根據(jù)step值來改變xstep的值，使下一次刷新圖層style時(shí)波紋角度略有改變
TIMER=setTimeout('wave()',10);//設(shè)定下一次更改的延時(shí)
}
}
//-->
</script>
</html>
<head>
<title>JS實(shí)現(xiàn)很酷的水波文字效果</title>
</head>
<body bgcolor="#000000" onLoad="if (document.all)wave()">
<center>
<div id='water' style='position:relative;width:400px;height:150px;font-family:Verdana;font-size:50px;color:#8080ff'>
</div>
</center>
<script language="javascript">
<!--
if (document.layers){ //如果是NS
alert("你的瀏覽器不支持這個(gè)特效"); //做出提示
}
else //否則(不是NS)
if (document.all){ //并且是IE的話
var step=3; //設(shè)定改變效果的步長
var xstep=0;
var msg='歡迎光臨<br>腳本之家<br>jb51.cn';
water.innerHTML=msg //設(shè)定效果圖層的內(nèi)容
function wave(){
//這句用來設(shè)定圖層的style,其中濾鏡的phase屬性根據(jù)xstep的值動(dòng)態(tài)設(shè)定。
document.all.water.style.filter='wave(freq=3, strength=5, phase='+xstep+', lightstrength=45, add=0, enabled=1)';
xstep+=step;
//根據(jù)step值來改變xstep的值，使下一次刷新圖層style時(shí)波紋角度略有改變
TIMER=setTimeout('wave()',10);//設(shè)定下一次更改的延時(shí)
}
}
//-->
</script>
</html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
小程序?qū)崿F(xiàn)列表倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)列表倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
經(jīng)搜索獲取數(shù)組中最大最小值的方法實(shí)在是太多了，不過大同小異，本文自寫了一個(gè)，有需要的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)躲避粒子小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
MATLAB中fillmissing函數(shù)用法小結(jié)
這篇文章主要介紹了MATLAB中fillmissing函數(shù)用法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
基于JavaScript實(shí)現(xiàn)報(bào)警器提示音效果
這篇文章給大家分享分享一段代碼基于JavaScript實(shí)現(xiàn)報(bào)警器提示音效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了微信通過頁面(H5)直接打開本地app的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
RxJS中有四種不同類型的Subject，它們分別是Subject、BehaviorSubject、ReplaySubject和AsyncSubject，本文將介紹這四種Subject的用法、區(qū)別以及適用的應(yīng)用場景，并提供代碼示例,需要的朋友可以參考下2023-07-07
innerHTML動(dòng)態(tài)添加html代碼和腳本兼容多個(gè)瀏覽器
innerHTML動(dòng)態(tài)添加html代碼和腳本，給某個(gè)元素的innerHTML賦值,并使得值中的js代碼有效且兼容多個(gè)瀏覽器，很棒的一個(gè)方法2014-10-10
js parseInt("08")未指定進(jìn)位制問題
今天在做JS關(guān)于月份的判斷，對于parseInt("01")到parseInt("07");都能得到正確的結(jié)果，但如果是parseInt("08")或parseInt("09")則返回0，首先看parseInt語法：parseInt(string, radix);2010-06-06
怎樣用Javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化
這篇文章主要介紹了怎樣用Javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化，想了解函數(shù)柯里化的同學(xué)，可以參考下2021-04-04