JS实现很酷的水波文字特效实例
更新时间：2015年02月26日 11:18:06 作者：代码家园
这篇文章主要介绍了JS实现很酷的水波文字特效,实例分析了javascript操作图层特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现很酷的水波文字特效。分享给大家供大家参考。具体实现方法如下：
复制代码 代码如下:
<html>
<head>
<title>JS实现很酷的水波文字效果</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("你的浏览器不支持这个特效"); //做出提示
}
else //否则(不是NS)
if (document.all){ //并且是IE的话
var step=3; //设定改变效果的步长
var xstep=0;
var msg='欢迎光临<br>脚本之家<br>jb51.cn';
water.innerHTML=msg //设定效果图层的内容
function wave(){
//这句用来设定图层的style,其中滤镜的phase属性根据xstep的值动态设定。
document.all.water.style.filter='wave(freq=3, strength=5, phase='+xstep+', lightstrength=45, add=0, enabled=1)';
xstep+=step;
//根据step值来改变xstep的值，使下一次刷新图层style时波纹角度略有改变
TIMER=setTimeout('wave()',10);//设定下一次更改的延时
}
}
//-->
</script>
</html>
<head>
<title>JS实现很酷的水波文字效果</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("你的浏览器不支持这个特效"); //做出提示
}
else //否则(不是NS)
if (document.all){ //并且是IE的话
var step=3; //设定改变效果的步长
var xstep=0;
var msg='欢迎光临<br>脚本之家<br>jb51.cn';
water.innerHTML=msg //设定效果图层的内容
function wave(){
//这句用来设定图层的style,其中滤镜的phase属性根据xstep的值动态设定。
document.all.water.style.filter='wave(freq=3, strength=5, phase='+xstep+', lightstrength=45, add=0, enabled=1)';
xstep+=step;
//根据step值来改变xstep的值，使下一次刷新图层style时波纹角度略有改变
TIMER=setTimeout('wave()',10);//设定下一次更改的延时
}
}
//-->
</script>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了6种JavaScript判断对象自身为空的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
这篇文章主要为大家详细介绍了JavaScript实现微信飞机大战游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了有关js对字符串数组进行拼接的性能问题，字符串连接一直是js中性能最低的操作之一，应该如何解决呢？请参看本文的介绍2014-10-10
uniapp 如何设置 tabbar 的 midButton 按钮
在UniApp开发中,设置TabBar的midButton按钮可以增加用户交互的便利性,本文介绍了在App.vue中监听事件的方法,并提供了官方文档链接作为参考,通过这种方式可以实现TabBar中的特殊按钮功能,提升应用的用户体验2024-10-10
封装一个vue中也可使用的uniapp的全局弹窗组件(任何页面都可以弹出)
在写uniapp小程序的时候,弹窗提醒经常会用到,虽然弹窗的组件很多,但是通常别人封装好的弹窗组件自定义度不高,很难匹配自己的ui需求,这篇文章主要给大家介绍了封装一个vue中也可使用的uniapp的全局弹窗组件的相关资料,这个组件在任何页面都可以弹出,需要的朋友可以参考下2023-02-02
Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。下面通过本文给大家介绍如何使用bootstrap插件来实现模态框2016-12-12
这篇文章主要为大家详细介绍了Bootstrap实现下拉菜单效果的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要为大家详细介绍了微信小程序云开发如何使用npm安装依赖，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了ES6新特性之promise对象,结合实例形式详细分析了promise对象的功能、状态、使用方法与相关操作技巧,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了bootstrap table实现横向合并与纵向合并，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
最新评论