下载文档原格式
javascript实现起伏的⽔波背景效果本⽂实例为⼤家分享了js⽔波背景效果的实现代码，供⼤家参考，具体内容如下效果图：实现代码：<!DOCTYPE html><html><head><title>⽔波背景</title><meta charset="gb2312" /><style>html, body {width:100%; height:100%; padding:0; margin:0;}</style></head><body><canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas><script type="text/javascript">var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');canvas.width = canvas.parentNode.offsetWidth;canvas.height = canvas.parentNode.offsetHeight;//如果浏览器⽀持requestAnimFrame则使⽤requestAnimFrame否则使⽤setTimeoutwindow.requestAnimFrame = (function(){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ){window.setTimeout(callback, 1000 / 60);};})();// 波浪⼤⼩var boHeight = canvas.height / 10;var posHeight = canvas.height / 1.2;//初始⾓度为0var step = 0;//定义三条不同波浪的颜⾊var lines = ["rgba(0,222,255, 0.2)","rgba(157,192,249, 0.2)","rgba(0,168,255, 0.2)"];function loop(){ctx.clearRect(0,0,canvas.width,canvas.height);step++;//画3个不同颜⾊的矩形for(var j = lines.length - 1; j >= 0; j--) {ctx.fillStyle = lines[j];//每个矩形的⾓度都不同，每个之间相差45度var angle = (step+j*50)*Math.PI/180;var deltaHeight = Math.sin(angle) * boHeight;var deltaHeightRight = Math.cos(angle) * boHeight;ctx.beginPath();ctx.moveTo(0, posHeight+deltaHeight);ctx.bezierCurveTo(canvas.width/2, posHeight+deltaHeight-boHeight, canvas.width / 2, posHeight+deltaHeightRight-boHeight, canvas.width, posHeight+deltaHeightRight); ctx.lineTo(canvas.width, canvas.height);ctx.lineTo(0, canvas.height);ctx.lineTo(0, posHeight+deltaHeight);ctx.closePath();ctx.fill();}requestAnimFrame(loop);}loop();</script></body></html>以上就是本⽂的全部内容，希望对⼤家学习javascript程序设计有所帮助。
水波纹扩散效果实现方案1. HTML结构我们需要先定义一个按钮，然后在其上应用水波纹效果。
代码如下：<button id="ripple-btn">点击我</button>2. CSS3样式实现水波纹效果通过使用CSS3的animation和@keyframes，我们可以实现水波纹的扩散效果。
代码如下：#ripple-btn {/* 设置按钮大小 */width: 100px;height: 100px;/* 设置背景颜色 */background-color: #6495ED;/* 设置圆形按钮 */border-radius: 50%;/* 隐藏按钮文字 */display: flex;justify-content: center;align-items: center;overflow: hidden;}#ripple-btn:active {/* 定义水波纹扩散动画 */animation: ripple 2s infinite;}@keyframes ripple {/* 定义水波纹形状 */0% {transform: scale(0);opacity: 1;}50% {/* 定义水波纹扩散到最大时的形状和透明度 */transform: scale(2);opacity: 0.7;}100% {/* 水波纹消失 */transform: scale(2.5);opacity: 0;}}这段代码会创建一个按钮，当用户点击按钮时，按钮会产生一个扩散的水波纹效果。
水波纹的扩散速度为2秒，颜色为#6495ED。
Action Script 3.0 练习水面涟漪特效在现实生活中，当水滴落到水面时，会将平静的水面打破，形成美丽的涟漪。
使用ActionScript3的复制像素和绘制像素等方法，可以将鼠标单击事件模拟为水滴掉落，制作出逼真的水面涟漪特效，如图6-7所示。
图6-7 水面涟漪特效水面涟漪特效的原理是获取鼠标单击影片时的坐标，并以该坐标的点为圆心，对背景图像应用卷积滤镜。
（1）在Flash中创建影片文件“wave.fla”，并执行【文件】|【导入】|【导入到库】命令，导入素材图像“background.jpg”，如图6-8所示。
图6-8 导入素材图像（2）新建影片剪辑元件“bgimg”，从【库】面板中拖动位图“background.jpg”到影片剪辑元件中，并将影片剪辑元件为ActionScript导出，【类】名称为bgimg，如图6-9所示。
图6-9 为ActionScript导出类（3）按F9快捷键打开【动作】面板，定义影片的刷新频率、创建影片背景图像的实例并定义影片中水面的宽度和高度，如下所示。
stage.frameRate=24;//定义影片的刷新频率var pwidth:Number = 528;//定义影片的宽度var pheight:Number = 400;//定义影片的高度var _bgimg:bgimg=new bgimg();//创建背景图像类的实例（4）创建影片中需要使用的各种对象，并声明鼠标判断的变量，如下所示。
var appearance:BitmapData=new BitmapData(pwidth,pheight,true);//创建位图数据用于绘制水的表面var ores:BitmapData = new BitmapData(pwidth, pheight, false, 128);//创建位图数据用于绘制第一层波纹var ores2:BitmapData = new BitmapData(pwidth*2, pheight*2, false, 128);//创建位图数据用于绘制第二层波纹var psour:BitmapData = new BitmapData(pwidth, pheight, false, 128);//创建位图数据用于装载背景图像var lbuff:BitmapData = new BitmapData(pwidth, pheight, false, 128);//创建位图数据用于实现缓冲var poutp:BitmapData = new BitmapData(pwidth*2, pheight*2, true, 128);//创建位图数据用于实现输出波纹var waveRect:Rectangle = new Rectangle(0, 0, pwidth, pheight);//创建波纹荡漾的矩形边界用于反弹波纹var spoint:Point = new Point();//创建鼠标单击波纹的起点var tranmatr:Matrix = new Matrix();//创建转换矩阵的起点var tranmatr2:Matrix = new Matrix();//创建转换矩阵的终点tranmatr2.a = tranmatr2.d=2;//将载入的图像映射到输出的转换矩阵中var wave:ConvolutionFilter = new ConvolutionFilter(3, 3, [1, 1, 1, 1, 1, 1, 1, 1, 1], 9, 0);//创建卷积滤镜对象var trans:ColorTransform = new ColorTransform(0, 0, 9.960937E-001, 1, 0, 0, 2, 0);//创建颜色转换的对象var water:DisplacementMapFilter = new DisplacementMapFilter(ores2, spoint, 4, 4, 96, 96, "ignore");//创建位图置换对象var leftpress:Boolean=false;//判断鼠标左键是否按下（5）创建构造对象_bg，并将其转换为位图对象，将其输出到构造对象Sprite中，如下所示。
JavaScript网页特效范例宝典第1章窗口/框架与导航条设计1.1 弹出窗口控制实例001 打开新窗口显示广告信息实例002 定时打开窗口实例003 通过按钮创建窗口实例004 自动关闭的广告窗口实例005 控制弹出窗口居中显示实例006 弹出的窗口之cookie控制实例007 为弹出的窗口加入关闭按钮实例008 关闭弹出窗口时刷新父窗口实例009 关闭IE主窗口时，不弹出询问对话框1.2 弹出网页对话框实例010 弹出网页模式对话框实例011 弹出全屏显示的网页模式对话框实例012 网页拾色器实例013 日期选择器1.3 窗口的动画效果实例014 页面自动滚动实例015 打开窗口特殊效果实例016 动态显示窗口实例017 慢慢放大的窗口实例018 下降式浏览器实例019 旋转的窗口实例020 移动的窗口实例021 震动的窗口实例022 弹出广告窗口1.4 窗口控制实例023 窗口始终在最上面实例024 窗口的最小化、最大化实例025 频道方式窗口实例026 全屏显示实例027 设置窗口大小和位置实例028 刷新当前页实例029 自动最大化实例030 自定义导航控制面板实例031 根据用户分表率自动调整窗口1.5 窗口的其他效果实例032 打开窗口时显示对话框实例033 使窗口背景透明实例034 立体窗口实例035 动态标题栏实例036 固定大小的窗口1.6 框架的应用实例037 框架集的嵌套实例038 在网页中应用浮动框架实例039 创建空白框架实例040 居中显示框架页1.7 无边框窗口实例041 全屏显示无边框有滚动条的窗口实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口1.8 水平导航条应用实例044 图片按钮导航条实例045 导航条的动画效果实例046 不用图片实现质感导航条1.9 下拉菜单式导航条实例047 二级导航菜单实例048 半透明背景的下拉菜单实例049 展开式导航条实例050 用层制作下拉菜单1实例051 用层制作下拉菜单21.10 侧导航条设计实例052 自动隐藏式菜单实例053 收缩式导航菜单实例054 树状导航菜单第2章表单及表单元素2.1 文本框/编辑框/隐藏域组件实例055 获取文本框/编辑框/隐藏域的值实例056 自动计算金额实例057 设置文本框的只读属性实例058 限制多行文本域输入的字符个数实例059 自动选择文本框/编辑框中的文字实例060 按下回车键时自动切换焦点2.2 下拉列表/菜单实例061 获取下拉列表/菜单的值实例062 遍历多选择下拉列表实例063 在下拉列表中进行多项移除实例064 将数组中的数据添加到下拉菜单中实例065 应用下拉菜单选择所要联机的网站实例066 多级级联菜单实例067 可以输入文字的下拉菜单实例068 根据下拉菜单的值显示不同控件实例069 分级下拉列表2.3 单选按钮组实例070 不提交表单获取单选按钮的值实例071 选中单选按钮后显示其他表单元素实例072 通过单选按钮控制其他表单元素是否可用2.4 复选框实例073 不提交表单获取复选框的值实例074 控制复选框的全选或反选实例075 只有一个复选框时控制复选框的全选或反选2.5 密码域实例076 让您的密码域更安全实例077 不提交表单自动检测密码域是否相同2.6 表单应用实例078 通过JavaScript控制表单的提交与重置实例079 带记忆功能的表单实例080 防止表单重复提交实例081 自动提交表单实例082 通过for循环获取表单元素的中文名称实例083 可以提交到不同处理页的表单第3章实用JavaScript函数3.1 数据验证实例084 通过正则表达式验证日期实例085 验证输入的日期格式是否正确实例086 检查表单元素是否为空实例087 验证E-mail是否正确实例088 通过正则表达式验证电话号码实例089 验证输入的字符串是否为汉字实例090 验证身份证号码实例091 验证用户名和密码实例092 验证车牌号码实例093 验证网站地址实例094 验证数量和金额实例095 验证字符串是否以指定字符开头实例096 限制数组字符串的长度3.2 字符串处理实例097 小写金额转换为大写金额实例098 二区字符串中的空格实例099 转换输入文本中的回车和空格实例100 将数字字符串格式化指定长度实例101 把一个长数字分位显示实例102 将RGB格式的颜色值转换为十六进制格式实例103 将IP地址转换为对应的数值实例104 从指定URL中提取文件名3.3 随机函数实例105 随机产生指定位数的验证码实例106 生成随机字符串3.4 日期与时间实例107 显示长日期格式的系统日期实例108 实时显示系统时间第4章日期和时间4.1 日期时间显示实例109 在标题栏中显示日期时间实例110 使用toLocaleString()方法获取本地时间实例111 全中文显示日期实例112 在状态栏中显示日期时间实例113 使用数组显示星期实例114 在表格中显示时间实例115 退出页面时显示停留时间实例116 显示用户在页面的停留时间实例117 显示最后修改时间4.2 日期时间算法实例118 计算某一天是星期几实例119 判断指定年份是否为闰年实例120 计算从出生到现在度过的时间实例121 返回两个日期之间的间隔小时实例122 倒计时实例123 访问时间限制实例124 计步器4.3 日期时间特效实例125 分时问候实例126 节日提示实例127 倒影时钟实例128 带阴影的时钟实例129 动态石英钟实例130 生日提醒器实例131 数字时钟实例132 各地时间表实例133 位于页面顶层的时钟第5章文字特效5.1 文字的颜色变换实例134 简单文字变色实例135 文字变色实例136 变换的文字实例137 描边文字实例138 霓虹灯文字实例139 追逐点亮的文字实例140 荧光文字实例141 发光文字的闪烁效果实例142 文字的舞台灯光效果实例143 制作彩色渐变文字动画5.2 改变文字大小实例144 文字伸缩实例145 动荡的文字实例146 文字伸展实例147 文字逐个放大实例148 自动改变大小实例149 选择字体的大小5.3 文字显示效果实例150 文字渐隐渐现实例151 文字虚幻变化实例152 文字虚幻抖动5.4 指定文字位置实例153 将文字置于工作区左上角实例154 右上角文字实例155 鼠标移动文字5.5 文字动态移动实例156 文字自动滚屏实例157 文字上下滚动5.6 文字立体效果实例158 文字的旋转实例159 立体旋转文字实例160 文字3D效果5.7 文字动画效果实例161 反弹文字实例162 飞舞的文字实例163 飞翔的文字实例164 平面旋转的文字实例165 输出文字实例166 文字打字效果实例167 文字抖动实例168 指向文字时废除星型标记实例169 文字的抛出效果5.8 文字特殊效果实例170 波浪文字实例171 梦幻文字效果实例172 屏风文字实例173 文字效果5.9 其他实例174 随机显示文字实例175 文字加密及解密第6章超级链接特效6.1 超级链接样式实例176 改变超级链接字体样式实例177 当鼠标移动到超级链接时改变超级链接颜色实例178 改变超级链接背景色6.2 超级链接控制实例179 建立E-mail超级链接实例180 获取页面中的全部超级链接实例181 将网站设为首页实例182 单击鼠标右键自动链接到指定网站实例183 单击超级链接将本页加入收藏夹实例184 访问指定的链接地址实例185 返回默认主页实例186 导航链接6.3 超级链接特效实例187 快速闪动页面中的超级链接实例188 滚动的超级链接提示信息实例189 公告栏中显示超级链接实例190 显示超级链接站点相关信息实例191 显示超级链接的提示信息实例192 半透明背景的超级链接提示第7章操作表格7.1 表格的颜色效果实例193 闪烁的表格边框实例194 单元格边框变色实例195 选中的行变色7.2 对单元格的焦点进行控制实例196 选定表格中的单元格实例197 左右移动单元格的信息实例198 通过键盘使单元格焦点任意移动7.3 对表格的行、列进行修改实例199 动态制作表格实例200 动态生成行或列实例201 删除表中的行7.4 单元格的相关操作实例202 隐藏及显示单元格实例203 编辑单元格中的文本信息实例204 合并单元格实例205 在表格中添加行及单元格实例206 删除表中的单元格7.5 表格的特殊效果实例207 透明表格实例208 限制表格的宽度实例209 表格的标题实例210 表格的外阴影实例211 立体表格实例212 虚线边框表格实例213 表格作为分割线实例214 表格向下展开第8章图形图像与多媒体8.1 图片大小实例215 打开自定义大小的图片实例216 图片放大缩小实例217 通过鼠标滚轮放大缩小图片8.2 图片与鼠标相关操作实例218 跟随鼠标移动的图片实例219 可以左右拖动的图片实例220 随意拖动图片实例221 当鼠标经过图片时显示图片实例222 改变图片获取焦点时的状态实例223 抖动的图片实例224 鼠标移动放大图片8.3 图片与时间相关操作实例225 定时隐藏图片实例226 根据时间变换页面背景实例227 使图片不停闪烁实例228 上下跳动的图片实例229 图片左右晃动实例230 飘舞的变形图片8.4 图片的动画效果实例231 图片翻转效果实例232 水波倒影特效实例233 图片渐隐渐现实例234 图片的探照灯效果实例235 雷达扫描图片特效实例236 在页面中旋转的图片实例237 改变形状的图片实例238 图片在页面浮动实例239 随机变化的网页背景8.5 背景头像实例240 在列表中选择图片实例241 在弹出的新窗口中选择图片8.6 在页面中播放图片实例242 幻灯片式播放图片实例243 无间断的图片循环滚动效果8.7 图片的其他效果实例244 导航地图8.8 播放音乐实例245 为网页设置背景音乐实例246 随机播放背景音乐实例247 MIDI音乐选择8.9 插入Flash动画实例248 插入Flash动画实例249 插入背景透明的Flash动画8.10 播放视频文件实例250 播放AVI文件实例251 自制视频播放器第9章页面特效9.1 页面背景效果实例252 背景固定居中实例253 背景图片纵向重复显示实例254 通过按钮变换背景颜色实例255 背景自动变色实例256 百叶窗实例257 渐隐渐现的背景颜色实例258 页面缩小实例259 页面上下打开效果实例260 页面左右打开效果实例261 页面溶解效果9.2 特殊页面实例262 页首页尾切换实例263 调用下载页面实例264 程序加载页面实例265 颜色拾取器9.3 广告页面实例266 图片总置于顶端实例267 随机显示广告实例268 广告岁滚动条漂移9.4 页面动画效果实例269 下雪实例270 飘落的枫叶实例271 下雨实例272 背景的烟花效果实例273 变色的圆圈实例274 滚动的光环实例275 星空极速飞入效果实例276 闪烁的星星9.5 其他实例277 带密码的网页实例278 页面左右滚动实例279 动态移动的层实例280 在页面中显示十字光标第10章状态栏特效实例281 使状态栏中的文字不停闪烁实例282 文字从右到左依次弹出实例283 文字从中间向两边展开实例284 文字跑马灯特效实例285 文字依次显示后快速收缩实例286 文字的展开与收缩实例287 状态栏中的文字依次弹出10.2 其他实例288 在状态栏中显示固定的自定义信息实例289 在状态栏显示鼠标坐标实例290 在状态栏显示特定的超级链接信息第11章报表与打印11.1 Web打印实例291 调用IE自身的打印功能实现打印实例292 打印指定框架中的内容实例293 利用WebBrowser打印实例294 设置页眉页脚11.2 利用Word打印报表实例295 将页面中的表格导出到Word并打印实例296 打开指定的Word文档并打印实例297 在JSP中利用Word自动打印指定格式的会议记录实例298 在ASP中利用Word自动打印指定格式的会议记录实例299 在PHP中调用Word自动打印指定格式的会议记录11.3 利用Excel打印报表实例300 将Web页面中的数据导出到Excel实例301 将Web页面中的数据导出到Excel并自动打印11.4 利用CSS样式打印实例302 利用CSS样式打印页面中的指定内容实例303 利用CSS样式分页打印11.5 套打邮寄产品单实例304 打印汇款单实例305 打印快递单实例306 打印信封第12章网站安全12.1 禁止用户复制网页内容实例307 禁止用户复制网页内容（方法一）实例308 禁止用户复制网页内容（方法二）实例309 禁止网页另存为12.2 禁止用户刷新屏幕实例310 屏蔽IE主菜单实例311 屏蔽键盘相关事件实例312 屏幕鼠标右键12.3 登录页面实例313 具有浏览器检测功能的登录页面实例314 防止SQL注入的登录页面实例315 带验证码的登录页面12.4 其他实例316 使用Script Encoder加密工具加密第13章 HTML/CSS样式13.1 页面效果实例317 统一站内网页风格实例318 设置超级链接文字样式实例319 网页换肤实例320 滚动文字实例321 制作渐变背景13.2 表格样式实例322 只有外边框的表格实例323 彩色外边框的表格实例324 控制表格指定外边框不显示实例325 背景颜色渐变的表格实例326 表格隔行13.3 鼠标及滚动条样式实例327 显示自定义鼠标形状实例328 动画光标实例329 制作彩色滚动条13.4 文字及列表样式实例330 应用删除线样式标记商品特价实例331 在文字上方标准说明标记实例332 指定图标的列表项13.5 文字滤镜特效实例333 文字的发光效果实例334 文字的阴影效果实例335 文字的渐变阴影效果实例336 文字的图案填充效果实例337 文字的探照灯效果实例338 文字的闪烁效果实例339 文字的空心效果实例340 文字的浮雕效果实例341 文字的阳文效果实例342 文字的雪雕效果实例343 火焰字实例344 文字扭曲动画13.6 图片滤镜特效实例345 图片的半透明效果实例346 图片的模糊效果实例347 图片的水波纹特效实例348 图片的灰度效果实例349 图片的动态说明文字第14章读取XML文件14.1 读取XML文件实例350 使用XML DOM对象读取XML文件实例351 使用XMLHttpRequest对象读取XML文件14.2 显示XML文档实例352 使用CSS显示XML文档实例353 使用XSL显示XML文档实例354 使用IE XML数据到输出XML文档14.3 操作XML实例355 用JavaScript控制XML文档的分页显示实例356 通过操作XML数据岛实现添加、删除留言信息第15章 JavaScript与ASP第16章 JavaScript与JSP第17章 JavaScript与结合第18章 JavaScript与PHP结合18.1 窗口与对话框实例386 弹出提示对话框并重定向网页实例387 关闭弹出窗口时自动刷新父窗口实例388 在弹出的网页模式对话框中选择个性头像实例389 时间选择器实例390 弹出提示对话框并重定向网页实例391 删除数据前弹出确认对话框18.2 其他实例392 树状导航菜单第19章综合应用19.1 计算器实例393 简单计算器实例394 复杂计算器19.2 日历实例395 精美日历实例396 带农历的日历19.3 购物车实例397 添加至购物车实例398 查看购物车实例399 修改商品购买数量实例400 从购物车中移去指定商品实例401 清空购物车第20章 jQuery应用开发20.1 jQuery基础开发实例402 获取文本输入框中输入的值实例403 动态修改div标记内容实例404 通过类名选择器选择元素并更改样式实例405 隐藏超级链接地址实例406 为版权列表设置样式实例407 位表单的直接子元素input换肤实例408 改变指定元素的背景颜色为淡蓝色实例409 筛选页面中div元素的同辈元素实例410 获取页面上隐藏和显示的input元素值实例411 获取和设置元素的文本内容与HTML内容实例412 为多行列表框设置并获取值20.2 jQuery表格应用实例413 匹配表单中相应的元素实例414 带表头的双色表格实例415 应用内容过滤器匹配指定单元格实例416 隔行换色并且鼠标指向行变色的表格20.3 jQuery在实际中的应用实例417 自动隐藏式菜单实例418 伸缩式导航菜单实例419 实现图片传送带实例420 打造自己的开心农场。
制作逼真水波纹效果的应用技巧近年来，水波纹效果在设计领域越来越受到重视，无论是网页设计、游戏开发还是平面设计中，都能看到水波纹效果的应用。
它能增加设计作品的动感和层次感，给用户带来沉浸式的视觉体验。
本文将介绍一些制作逼真水波纹效果的技巧，帮助您在设计中运用水波纹效果。
一、选择合适的软件工具制作逼真水波纹效果首先要选择合适的软件工具。
常见的设计软件如Adobe Photoshop、Adobe Illustrator和Sketch等都具备绘制和编辑水波纹效果的功能。
根据设计需求和个人偏好选择合适的软件工具，并熟悉其使用方法。
二、绘制水波纹矢量图形水波纹效果的关键在于绘制逼真的矢量图形。
可以使用软件工具中的绘图工具，如铅笔工具或钢笔工具，在画布上绘制出具有起伏感和流动感的曲线。
在绘制过程中，可以通过调整曲线的粗细、颜色和透明度等参数，使水波纹看起来更加真实。
三、运用滤镜和渐变效果通过运用滤镜效果和渐变效果，可以让水波纹效果更加逼真。
在软件工具中，可以尝试使用不同的滤镜效果，如涟漪、扩散和模糊等，来改变水波纹的外观。
同时，通过应用渐变效果，如渐变填充或渐变图层样式，可以增加水波纹的立体感和层次感。
四、运用光影效果在制作逼真水波纹效果时，适当添加光影效果可以增强其真实感和质感。
通过运用软件工具中的投影和高光效果，可以在水波纹上投射出光线，同时还可以模拟不同光源的照射角度和强度，使水波纹看起来更加生动。
五、利用纹理和材质纹理和材质是制作逼真水波纹效果的重要要素。
可以在设计软件中导入合适的纹理图片或使用软件工具中提供的纹理效果，如颗粒、线条和噪点等，来增加水波纹的质感和细节。
同时，通过运用透明度和蒙版等功能，可以使水波纹与其它图形元素更好地融合。
六、调整动画效果对于需要制作动画水波纹效果的设计，可以利用软件工具中的时间轴和关键帧功能来调整水波纹的动画效果。
通过设置起始点、结束点和过渡效果，可以让水波纹呈现出自然流动或波浪翻滚的动态效果，增加设计作品的活力和吸引力。
dom修饰水面方法
DOM修饰水面方法是一种常用的技术，用于实现在网页中呈现出动态的、具有水面波浪效果的视觉效果。
该方法基于DOM（文档对象模型）来修改水面的样式和动画属性，从而创建出逼真的水波效果。
要实现这种效果，我们可以通过以下步骤来操作：
1. 创建一个 `<div>` 元素，用于表示水面。
给该元素设置一个唯一的ID，以便我们可以通过JavaScript和CSS样式来操作它。
2. 使用CSS样式为水面元素设置宽度、高度和背景颜色等属性。
这些属性将决定水面元素的外观。
3. 通过JavaScript获取水面元素的引用，可以使用 `document.getElementById()` 方法，将水面元素的唯一ID作为参数传入。
4. 为水面元素添加动画效果，可以使用CSS的 `@keyframes` 规则来定义水面波动的动画过程。
在 `@keyframes` 规则中，我们可以定义多个帧，从而创建出水面波动的效果。
5. 使用JavaScript将动画效果应用到水面元素上。
可以通过设置水面元素的
`style.animation` 属性，将动画效果绑定到水面元素上。
设置正确的动画名称和持续时间等属性，以实现适当的波动效果。
通过上述步骤，我们可以轻松地实现DOM修饰水面的方法。
这种方法不仅可以为网页增添视觉效果，还能够提升用户体验。
基于JavaScript实现瀑布流效果(循环渐近)1.建立Html模版想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下<!DOCTYPE html><html><head><meta charset="UTF-8"><title>瀑布流</title></head><body><div class="container" id="container"><div class="box_border" id="box_border"><div class="box" id="box1"><img src="image/01.jpg"></div><!--把Box复制多份,这里因为代码重复省略了--></div></div></body></html>效果:(未设置css属性所以都是垂直放置的)2.通过css简单设置样式主要设置水平放置,相框颜色,边界之类的/*边界不留空,背景黑灰*/body{margin: 0px;background: darkgray;}/*总布局设置为相对布局*/.container{position: relative;}/*设置box属性*/.box{padding: 5px;float: left;}/*设置图片边框阴影和圆角*/.box_border{padding: 5px;border: 1px solid #cccccc;box-shadow: 0px 0px 5px #ccc; border-radius: 5px;}/*设置图片格式*/.box_border img{width: 150px;height: auto;}效果:(边框什么都有了)3.JS控制每一行所摆放的图片个数上面的css布局之后,浏览器窗口大小改变,里面的图片数量也会改变,现在要用JS固定住每一行的图片数量,对于不同尺寸的屏幕都能做到很好的效果/*用于加载其他函数*/window.onload = function(){setImgLocation("container");}/*设置图片个数*/function setImgLocation(parent){var cparent = document.getElementById(parent);//得到父节点var childArray = getChildNodes(cparent);//得到图片数量var imgWidth = childArray[0].offsetWidth;//获取照片宽度var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度var count = Math.floor(screenWidth/imgWidth);//每行的个数cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中}/*获取全部图片的个数*/function getChildNodes(parent){var childArray =[];//定义一个数组存放图片boxvar tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点//循环添加class为box的节点for(var i = 0;i<tempNodes.length;i++){if(tempNodes[i].className == "box"){childArray.push(tempNodes[i]);}}return childArray;//返回所有的子节点}效果图:针对不同屏幕大小显示的个数是不一样的4.JS实现静态瀑布流先实现静态的布局,也就是浏览器下拉不会自动刷新出新的图片.实现排列算法很简单1.把第一排图片的高度全部存到一个数组2.计算出第一排中的图片的最小高度和对应位置3.把第一排之后的第一个图片放到该位置上4.重新设置该位置的高度为两个图片相加5.循环2剩余全部图片代码:/*用于加载其他函数*/window.onload = function(){setImgLocation("container");}/*设置图片个数及位置排列*/function setImgLocation(parent){var cparent = document.getElementById(parent);//得到父节点var childArray = getChildNodes(cparent);//得到图片数量var imgWidth = childArray[0].offsetWidth;//获取照片宽度var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度var count = Math.floor(screenWidth/imgWidth);//每行的个数cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中//定义数组,存放第一行照片高度var imgHArray = [];//循环遍历图片for(var i=0;i<childArray.length;i++){//如果图片在第一行则获取高度if(i<count){imgHArray[i] = childArray[i].offsetHeight;}else//否则把最小高度的填充剩余图片{var minHeight = Math.min.apply(null,imgHArray);//获取最小高度var minIndex = getMinIndex(minHeight,imgHArray);//获取最小高度对应的下标childArray[i].style.position = "absolute";//设置要填充的图片盒子为绝对布局,否则不能更换位置childArray[i].style.top = minHeight+"px";//设置要填充图片距顶高度childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//设置要填充图片距左高度imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把当前位置高度设为两个图片相加//开始下一轮循环}}}/*获取最小高度对应的下标*/function getMinIndex(minHeight,imgHArray){for(var i in imgHArray){if(imgHArray[i] == minHeight){return i;}}}/*获取全部图片的个数*/function getChildNodes(parent){var childArray =[];//定义一个数组存放图片boxvar tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点//循环添加class为box的节点for(var i = 0;i<tempNodes.length;i++){if(tempNodes[i].className == "box"){childArray.push(tempNodes[i]);}}return childArray;//返回所有的子节点}效果:5.js实现动态加载动态加载也就是滚动条永远滑不到底部,要解决动态加载我们需要考虑两个问题:1.什么时候加载?滑动距离+浏览器高度>最后一张图片距离顶部的距离2.怎样加载?通过创建新的节点,把创建的节点添加进去即可最终代码:/*用于加载其他函数*/window.onload = function() {var cparent = document.getElementById("container");//得到父节点setImgLocation(cparent);//设置加载的图片var data = ["image/01.jpg", "image/02.jpg", "image/03.jpg", "image/04.jpg", "image/05.jpg", "image/06.jpg", "image/07.jpg", "image/08.jpg", "image/09.jpg","image/11.jpg", "image/12.jpg", "image/13.jpg", "image/14.jpg", "image/15.jpg", "image/16.jpg", "image/17.jpg"];//滑动监听window.onscroll = function () {if (checkLoad(cparent)) {for (var i = 0; i < data.length; i++) {//创建新的节点var div1 = document.createElement("div");div1.className = "box";var div2 = document.createElement("div");div2.className = "box_border";var img = document.createElement("img"); img.className = ".box_border img";img.src = data[i];div2.appendChild(img);div1.appendChild(div2);cparent.appendChild(div1);}setImgLocation(cparent);//创建节点后重新排列}}}/*检查是否应该加载*/function checkLoad(cparent){var childArray = getChildNodes(cparent);//得到图片个数var lastImgHight = childArray[childArray.length-1].offsetTop;//得到最后一张图片距离顶部高度var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;//获得滑动距离(浏览器兼容性真烦人)var browserHeight = document.documentElement.clientHeight;//获得浏览器高度if(lastImgHight < scrollHeight+browserHeight){//判断是否加载return true;}else {return false;}}/*设置图片个数及位置排列*/function setImgLocation(cparent){var childArray = getChildNodes(cparent);//得到图片数量var imgWidth = childArray[0].offsetWidth;//获取照片宽度var browserWidth = document.documentElement.clientWidth;//获取浏览器宽度var count = Math.floor(browserWidth/imgWidth);//每行的个数cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中//定义数组,存放第一行照片高度var imgHArray = [];//循环遍历图片for(var i=0;i<childArray.length;i++){//如果图片在第一行则获取高度if(i<count){imgHArray[i] = childArray[i].offsetHeight;}else//否则把最小高度的填充剩余图片{var minHeight = Math.min.apply(null,imgHArray);//获取最小高度var minIndex = getMinIndex(minHeight,imgHArray);//获取最小高度对应的下标childArray[i].style.position = "absolute";//设置要填充的图片盒子为绝对布局,否则不能更换位置childArray[i].style.top = minHeight+"px";//设置要填充图片距顶高度childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//设置要填充图片距左高度imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把当前位置高度设为两个图片相加//开始下一轮循环}}}/*获取最小高度对应的下标*/function getMinIndex(minHeight,imgHArray){for(var i in imgHArray){if(imgHArray[i] == minHeight){return i;}}}/*获取全部图片的个数*/function getChildNodes(parent){var childArray =[];//定义一个数组存放图片boxvar tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点//循环添加class为box的节点for(var i = 0;i<tempNodes.length;i++){if(tempNodes[i].className == "box"){childArray.push(tempNodes[i]);}}return childArray;//返回所有的子节点}效果:以上就是本文章的内容，希望对大家有所帮助。
利⽤vue3+threejs仿iView官⽹⼤波浪特效实例⽬录前⾔⼀、效果图⼆、代码三、背景图⽚素材总结前⾔Threejs可以理解为是⼀个web端三维引擎（渲染模型，数据可视化），如果有接触过UnralEngine 4(虚幻四)等游戏引擎的，应该很容易理解在⼀个三维场景必备的每⼀个部件（场景，渲染器，⽹格模型，材质，光源，⾊相机）。
好的，基础知识咱们先跳过，直接上实现的过程⼀、效果图先上最终效果图：具体效果可参考iview官⽅界⾯⼤波浪效果，使⽤的是three.js的官⽅例⼦，需要先安装three.js⽀持,具体可以看官⽅实例⼆、代码1.安装threejsnpm install --save three2.代码（复制可⽤） components⽂件夹新建组件waves.vue，直接复制代码如下，可直接运⾏：<template><div id="iviewBg"></div></template><script>import * as THREE from "three";显⽰右上⾓fps框// import Stats from "./stats.module";import { onMounted } from "vue";export default {props: {//控制x轴波浪的长度amountX: {type: Number,default: 50,},//控制y轴波浪的长度amountY: {type: Number,default: 50,},//控制点颜⾊color: {type: String,default: "#097bdb",},//控制波浪的位置top: {type: Number,default: 350,},},setup(props) {const SEPARATION = 100;// let stats;let container, camera, scene, renderer;let particles,count = 0;let mouseX = 0;let windowHalfX = window.innerWidth / 2;function init() {container = document.createElement("div");document.getElementById("iviewBg").appendChild(container);//创建透视相机camera = new THREE.PerspectiveCamera(75, //摄像机视锥体垂直视野⾓度window.innerWidth / window.innerHeight, //摄像机视锥体长宽⽐1, //摄像机视锥体近端⾯10000 //摄像机视锥体远端⾯);//设置相机z轴视野camera.position.z = 1000;//创建场景scene = new THREE.Scene();const numParticles = props.amountX * props.amountY;const positions = new Float32Array(numParticles * 3);const scales = new Float32Array(numParticles);let i = 0,j = 0;// 初始化粒⼦位置和⼤⼩for (let ix = 0; ix < props.amountX; ix++) {for (let iy = 0; iy < props.amountY; iy++) {positions[i] = ix * SEPARATION - (props.amountX * SEPARATION) / 2; // xpositions[i + 1] = 0; // ypositions[i + 2] = iy * SEPARATION - (props.amountY * SEPARATION) / 2; // zscales[j] = 1;i += 3;j++;}}//是⾯⽚、线或点⼏何体的有效表述。
JavaFX实现水波效果public class JfxRipper extends Application {private final double MAX_WIDTH = 400.0;private final double MAX_HEIGHT = 400.0;private static AnimationTimer timer;private static AnimationTimer rainTimer;private FileChooser fc;private double scaleRate;private int maxRainSize, maxRainPower, stoneSize, stonePower;private int imgWidth, imgHeight;int[] arrWaveCurrent;// 当前帧各点波动能量数据int[] arrWaveNext;// 下一帧各点波动能量数据private Image img;private WritableImage imgRipper;private ImageView imgView;@Overridepublic void init() throws Exception {fc = new FileChooser();//添加文件类型过滤fc.getExtensionFilters().add(new FileChooser.ExtensionFilter("图片文件","*.jpg;*.png;*.jpeg;*.bmp"));img = newImage(getClass().getClassLoader().getResourceAsStream("images/ 红花.jpg"));imgWidth = (int) img.getWidth();imgHeight = (int) img.getHeight();//波纹效果计算需要遍历图片每个像素,图片尺寸过大会导致运行速度极慢,故按比例缩小if (imgWidth > MAX_WIDTH || imgHeight > MAX_HEIGHT) {double sx = MAX_WIDTH / imgWidth;double sy = MAX_HEIGHT / imgHeight;scaleRate = sx > sy ? sy : sx;img = scaleImg(img, imgWidth, imgHeight, scaleRate);imgWidth = (int) (scaleRate * (double) imgWidth);imgHeight = (int) (scaleRate * (double) imgHeight);maxRainSize = 4;maxRainPower = 60;stoneSize = 5;stonePower = 128;} else {//雨点和石子大小根据图片尺寸的大小稍作调整maxRainSize = 3;maxRainPower = 50;stoneSize = 4;stonePower = 108;}imgRipper = new WritableImage(imgWidth, imgHeight); arrWaveCurrent = new int[imgWidth * imgHeight];arrWaveNext = new int[imgWidth * imgHeight];imgView = new ImageView();imgView.setOnMousePressed(new EventHandler<Event>() {@Overridepublic void handle(Event event) {MouseEvent e = (MouseEvent) event;dropStone((int) e.getX(), (int) e.getY(), stoneSize, stonePower); }});timer = new AnimationTimer() {@Overridepublic void handle(long now) {genRipper();imgView.setImage(imgRipper);}};rainTimer = new AnimationTimer() {@Overridepublic void handle(long now) {rain();imgView.setImage(imgRipper);}};}/*** 模拟下雨,随机抛出不同大小和位置的石子*/protected void rain() {int x = (int) (Math.random() * imgWidth);int y = (int) (Math.random() * imgHeight);int rainSize = (int) (Math.random() * maxRainSize);int power = (int) (Math.random() * maxRainPower) + maxRainPower; dropStone(x, y, rainSize, power);}@Overridepublic void start(Stage primaryStage) throws Exception {Group root = new Group();VBox vb = new VBox(10);root.getChildren().add(vb);imgView.setImage(img);Scene scene = new Scene(root);primaryStage.setScene(scene);HBox hb = new HBox(10);Button rainControl = new Button("停止下雨");rainControl.setOnAction((ActionEvent event) -> {if ("开始下雨".equals(rainControl.getText())) { rainTimer.start();rainControl.setText("停止下雨");} else {rainTimer.stop();rainControl.setText("开始下雨");}});Button changePic = new Button("更换图片"); changePic.setOnAction((ActionEvent event) -> { File f = fc.showOpenDialog(primaryStage);if (null != f) {//将默认目录设置为上次访问过的目录fc.setInitialDirectory(f.getParentFile());//Image imgTmp = null;try {img = new Image(new FileInputStream(f));//Desktop.getDesktop().open(f);} catch (Exception e) {e.printStackTrace();}if (img != null) {imgWidth = (int) img.getWidth();imgHeight = (int) img.getHeight();if (imgWidth > MAX_WIDTH || imgHeight > MAX_HEIGHT) { double sx = MAX_WIDTH / imgWidth;double sy = MAX_HEIGHT / imgHeight;scaleRate = sx > sy ? sy : sx;img = scaleImg(img, imgWidth, imgHeight, scaleRate); imgWidth = (int) (scaleRate * (double) imgWidth); imgHeight = (int) (scaleRate * (double) imgHeight); maxRainSize = 4;maxRainPower = 60;stoneSize = 5;stonePower = 128;} else {maxRainSize = 3;maxRainPower = 50;stoneSize = 4;stonePower = 108;}imgRipper = new WritableImage(imgWidth, imgHeight); arrWaveCurrent = new int[imgWidth * imgHeight]; arrWaveNext = new int[imgWidth * imgHeight]; imgView.setFitHeight(imgHeight);imgView.setFitWidth(imgWidth);primaryStage.setWidth(imgWidth);imgView.setImage(img);primaryStage.setHeight(imgHeight + 40);}}});Button exit = new Button("退出");exit.setOnAction((ActionEvent event) -> { primaryStage.close();});hb.getChildren().addAll(rainControl, changePic, exit); vb.getChildren().addAll(imgView, hb);primaryStage.setWidth(imgWidth);hb.setAlignment(Pos.CENTER);scene.setFill(Color.BLUEVIOLET);primaryStage.initStyle(StageStyle.TRANSPARENT); timer.start();rainTimer.start();primaryStage.show();}/** 水波算法,原作者Imagic*/public void genRipper() {PixelReader readImg = img.getPixelReader();PixelWriter writeRipper = imgRipper.getPixelWriter();int index = imgWidth;int indexPreX = index - 1;int indexNextX = index + 1;int indexPreY = index - imgWidth;int indexNextY = index + imgWidth;for (int y = 1; y < imgHeight - 1; y++) {for (int x = 1; x < imgWidth - 1; x++, index++) {int x1 = arrWaveCurrent[indexPreX++];int x2 = arrWaveCurrent[indexNextX++];int x3 = arrWaveCurrent[indexPreY++];int x4 = arrWaveCurrent[indexNextY++];// 波能扩散:上下左右四点的波幅和的一半减去当前波幅// X0' =，X1 + X2 + X3 + X4，/ 2 - X0arrWaveNext[index] = ((x1 + x2 + x3 + x4) >> 1) - arrWaveNext[index]; // 波能衰减 1/32arrWaveNext[index] -= arrWaveNext[index] >> 5;// 计算出偏移象素和原始象素的内存地址偏移量 :int xoffset = x2 - x1;int yoffset = x4 - x3;int offset = imgWidth * yoffset + xoffset;int posY = index / imgWidth;int posX = index - posY * imgWidth;int newY = (index + offset) / imgWidth;int newX = (index + offset) - newY * imgWidth;// 判断坐标是否在窗口范围内if (index + offset > 0 && index + offset < imgWidth * imgHeight) { writeRipper.setColor(posX, posY, readImg.getColor(newX, newY));} else {writeRipper.setColor(posX, posY, readImg.getColor(posX, posY));}}}// 交换波能数据缓冲区int[] temp = arrWaveCurrent;arrWaveCurrent = arrWaveNext;arrWaveNext = temp;}/*** 模拟向水中投石子** @param x:石子位置X坐标* @param y:石子位置y坐标* @param stoneSize:石子半径* @param power:波能大小*/private void dropStone(int x, int y, int stoneSize, int power) { int minPosX = x - stoneSize, maxPosX = x + stoneSize;int minPosY = y - stoneSize, maxPosY = y + stoneSize;minPosX = minPosX < 0 ? 0 : minPosX;minPosY = minPosY < 0 ? 0 : minPosY;maxPosX = maxPosX > imgWidth ? imgWidth : maxPosX;maxPosY = maxPosY > imgHeight ? imgHeight : maxPosY;int value = stoneSize * stoneSize;for (int posx = minPosX; posx < maxPosX; posx++) {for (int posy = minPosY; posy < maxPosY; posy++) {if ((posx - x) * (posx - x) + (posy - y) * (posy - y) < value) { arrWaveCurrent[posy * imgWidth + posx] = -power;}}}}/*** 按比例缩小图片* 缩小图片算法:x0 = x / sx, y0 = y / sy。
圆圈水波效果设计说明
圆圈水波效果是一种视觉效果，通常用于网站、应用程序和数字媒体中。
这种效果模仿了水滴在水面上扩散的波纹效果，因而常用于增加页面交互感和动感，同时也可以用于标识logo
的设计中。
实现圆圈水波效果的方法一般有两种。
一种是通过CSS动画
实现，另一种是通过JavaScript实现。
CSS动画实现起来简单，但是存在浏览器兼容性问题。
而JavaScript实现则可以更加灵
活地控制波纹的效果，并且可以通过浏览器兼容性的问题。
以下是实现圆圈水波效果的具体步骤：
1.创建一个div元素，并设置其class名和样式（例如：circle）。
2.在div元素中添加一个span标签，并设置其class名和样式（例如：ripple）。
3.通过JavaScript事件监听，例如点击事件，来触发水波效果
的展示。
在事件回调函数中，需要动态生成一个具有“动画”的class名，例如：animate。
4.在样式表中，编写circle和ripple的样式，同时编写由animate生成的“动画”class名的样式。
样式中需要包含圆形和
水波扩散效果的CSS属性，例如：border-radius、box-shadow
和transform等。
5.通过设置动画时长和延迟时间来控制水波效果的速度。
至此，圆圈水波效果的制作完成。
为了实现更加多样化的设计，可以在样式表中加入更多自定义的CSS属性和效果，例如：
颜色、透明度、边界宽度和线性渐变等。
这篇文章主要为大家详细介绍了javascript实现起伏的水波背景效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js水波背景效果的实现代码，供大家参考，具体内容如下
效果图：
实现代码：
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>水波背景</title>
<meta charset="gb2312" />
<style>
html, body {width:100%; height:100%; padding:0; margin:0;}
</style>
</head>
<body>
<canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.parentNode.offsetWidth;
canvas.height = canvas.parentNode.offsetHeight;
//如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
// 波浪大小
var boHeight = canvas.height / 10;
var posHeight = canvas.height / 1.2;
//初始角度为0
var step = 0;
//定义三条不同波浪的颜色
var lines = ["rgba(0,222,255, 0.2)",
"rgba(157,192,249, 0.2)",
"rgba(0,168,255, 0.2)"];
function loop(){
ctx.clearRect(0,0,canvas.width,canvas.height);
step++;
//画3个不同颜色的矩形
for(var j = lines.length - 1; j >= 0; j--) {
ctx.fillStyle = lines[j];
//每个矩形的角度都不同，每个之间相差45度
var angle = (step+j*50)*Math.PI/180;
var deltaHeight = Math.sin(angle) * boHeight;
var deltaHeightRight = Math.cos(angle) * boHeight;
ctx.beginPath();
ctx.moveTo(0, posHeight+deltaHeight);
ctx.bezierCurveTo(canvas.width/2, posHeight+deltaHeight-boHeight, canvas.width / 2, posHeight+deltaHeightRight-boHeight, canvas.width, posHeight+deltaHeightRight);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.lineTo(0, posHeight+deltaHeight);
ctx.closePath();
ctx.fill();
}
requestAnimFrame(loop);
}
loop();
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
