【波浪动态特效】基于jquery实现页面底部波浪动画效果(附完整源码下载)


文章目录

  • 写在前面
  • 涉及知识点
  • 实现效果
  • 1、搭建页面
    • 1.1、创建两个片区
    • 1.2、创建波浪区域
    • 1.3、静态页面源码
  • 2、JS实现波浪效果
    • 2.1 动画原理
    • 2.2 动画源码
  • 3、源码分享
    • 3.1 百度网盘
    • 3.2 123云盘
    • 3.3 邮箱留言
  • 总结


写在前面

想必搭建过企业官网的大多数对这个效果不陌生吧,尤其是现在这么卷的前端行业,很多特效是眼花缭乱,各种组件也是层出不穷,不得不让很多人望而却步,因此我马不停蹄的出了这旷世之作。只望大家能学有所长,接下来请听我娓娓道来。

涉及知识点

Jquery如何实现底部波浪动画,如何实现网站底部动态波浪效果,js实现页面波浪效果,前端页面实现网站底部波浪动态背景,jQuery网站底部动态波浪背景动画特效。
版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。

实现效果

这个主要为了给大家一个最终实现效果的反馈,文尾附完整代码包的分享链接。
在这里插入图片描述

1、搭建页面

1.1、创建两个片区

创建两个div容器,分别用于存放不同效果的盒子,我采用的是相对布局的方式,主要通过设置样式和html,其中效果如下所示:
在这里插入图片描述

其中html结构如下所示:

<body><div style="margin-top: 100px"></div><!-- 更多请关注CSDN博主-《拄杖盲学轻声码》 --><!-- footer --><div class="wave-box"><!-- 存放波浪 --></div><div class="footer"><!-- 存放底部导航 --></div><!-- footer end --><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p></p><p></p></div>
</body>

1.2、创建波浪区域

其实在A部分我们就已经创建好了两个div,然后就是针对波浪区域添加波浪效果,当然这里核心还是用背景图片,但是不是想象的那种大图,我用了两张图片,为的是两张图片动态效果,来回滚动形成一种波浪的效果。
首先放一个波浪效果(底部颜色改成灰色方便区分):
在这里插入图片描述

此时创建好了一个波浪,设置背景图即可。
采用相对布局的方式再添加一个效果如下:
在这里插入图片描述

当我们最后底色再设置成和其中一组波浪相同的话就有波浪的效果啦。
在这里插入图片描述

到最后就是丰富元素的过程啦。具体代码我先贴出,当然也可以完整的包在文尾下载。
最终丰富后静态页面效果(不带波浪)如下:
在这里插入图片描述

版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。

1.3、静态页面源码

Html代码所示

<div style="margin-top: 100px"></div><!-- footer --><div class="wave-box"><div class="marquee-box marquee-up" id="marquee-box"><div class="marquee"><div class="wave-list-box" id="wave-list-box1"><ul><li><img height="60" alt="波浪" src="images/wave_02.png"></li></ul></div><div class="wave-list-box" id="wave-list-box2"><ul><li><img height="60" alt="波浪" src="images/wave_02.png"></li></ul></div></div></div><div class="marquee-box" id="marquee-box3"><div class="marquee"><div class="wave-list-box" id="wave-list-box4"><ul><li><img height="60" alt="波浪" src="images/wave_01.png"></li></ul></div><div class="wave-list-box" id="wave-list-box5"><ul><li><img height="60" alt="波浪" src="images/wave_01.png"></li></ul></div></div></div></div><div class="footer"><div class="auto clearfix"><!-- footer主要--><div class="five-superiority"><ul class="five-superiority-list clearfix"><li class="compensate_ico"><a href="#compensate"><span class="superiority-icon"></span><span>100倍故障赔偿</span></a></li><li class="retreat_ico"><a href="#refund"><span class="superiority-icon"></span><span>5天无理由退款</span></a></li><li class="technology_ico"><a class="superiority-text" href="#afterService"><span class="superiority-icon"></span><span>7x24小时技术支持</span></a></li><li class="prepare_ico"><a href="#ico"><span class="superiority-icon"></span><span>0元快速备案</span></a></li><li class="service_ico"><a href="#secret"><span class="superiority-icon"></span><span>1V1专席秘书</span></a></li></ul></div><div class="footer-floor1"><div class="footer-list"><ul><li class="flist-title">产品与服务</li><li><a href="#"><strong>弹性云服务器</strong></a></li><li><a href="#"><strong>服务器托管</strong></a></li><li><a href="#"><strong>云虚拟主机</strong></a></li><li><a href="#"><strong>某公司管家</strong></a></li><li><a href="#"><strong>某公司监控</strong></a></li></ul><ul><li class="flist-title">云解决方案</li><li><a href="#">金融解决方案</a></li><li><a href="#">电商解决方案</a></li><li><a href="#">移动解决方案</a></li><li><a href="#">游戏解决方案</a></li><li><a href="#">网站解决方案</a></li></ul><ul><li class="flist-title">技术与支持</li><li><a href="#" target="user/">工单系统</a></li><!--<li><a href="http://icp.niaoyun.com/">备案中心</a></li>--><li><a href="#">意见反馈</a></li><li><a href="">会员服务</a></li><li><a href="#">IDC公司</a></li><li><a href="#">帮助中心</a></li></ul><ul class="flist-4"><li class="flist-title">关于某公司</li><li><a href="#">公司简介</a></li><li><a href="#">新闻动态</a></li><li><a href="#">加入我们</a></li><li><a href="#">服务协议</a></li><li><a href="#">友情链接</a></li></ul><div class="clear-float"></div></div><div class="footer-right"><div class="telephone" title="服务热线"><span></span><div class="tel-number">400-688-3065</div></div><div class="official-plat"><p class="weixin" style="background-image: "><span id="wx-corner"></span></p><p class="weibo" style="background-image: "><span id="wb-corner"></span></p><ul><li><a href="#a_null"><span class="weixin-logo"></span>某公司官方微信</a></li><li title="点击打开官方微博"><a href="#" target="_blank"><span class="weibo-logo"></span>某公司官方微博</a></li><li title="点击打开官方客服"><a href="http://www.baofumeng.cn/inithdd/#/rewordData"><spanclass="qq-logo"></span>某公司官方客服</a></li></ul></div></div><div class="clear-float"></div></div></div><div class="footer-floor2"><p>更多内容可关注CSDN博主《拄杖盲学轻声码》.</p><p>来源:<a href="http://www.baofumeng.cn/inithdd/#/rewordData" target="_blank">技术英雄榜</a></p></div></div>

CSS代码所示

/* 更多请关注CSDN博主-《拄杖盲学轻声码》*/
* {margin: 0;padding: 0;box-sizing: border-box;list-style: none
}body {font-family: "Microsoft Yahei";min-width: 1000px
}a {outline: 0;text-decoration: none
}strong {font-weight: 400
}.strong {font-weight: 700
}::selection {background: #1EACDF;color: #fff
}img {border: 0
}::-moz-selection {background: #1EACDF;color: #fff
}::-webkit-selection {background: #1EACDF;color: #fff
}.autoWidth {margin: 0 auto;min-width: 1000px;max-width: 1200px
}.auto {margin: 0 auto;min-width: 1000px;max-width: 1200px
}@media screen and (max-width:1233px) {.auto {padding-left: 10px}
}.clearfix:after,
.clearfix:before {display: table;line-height: 0;content: ""
}.clearfix:after {clear: both
}.clear-float {clear: both
}.footer {width: 100%;background-color: #009fd9;font-family: "Microsoft Yahei"
}.footer-floor1 {width: 100%;padding: 36px 0 60px
}.footer-list {width: 69%;height: 100%;float: left
}.footer-list ul {float: left;margin-right: 13%
}.footer-list .flist-4 {margin-right: 0
}.footer-list li {line-height: 32px
}.footer-list li a {color: #b6e2f2;font-size: 12px;text-decoration: none
}.footer-list li a:hover {text-decoration: underline;color: #fff
}.footer-list .flist-title {font-size: 16px;color: #fff;margin-bottom: 15px
}.footer-floor2 {width: 100%;border-top: 1px solid #4cc3ed;padding: 20px 0;text-align: center
}.footer-floor2 p {text-align: center;color: #b6e2f2;font-size: 12px;line-height: 30px
}.footer-floor2 p span {font-family: PingFangSC-Light, 'helvetica neue', 'hiragino sans gb', tahoma, 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif
}.footer-floor2 a {color: #b6e2f2
}.footer-floor2 a:hover {color: #a8d0e0;text-decoration: underline
}.foot-link {margin: 0 15px;text-decoration: none;color: #b6e2f2
}.foot-link:hover {text-decoration: underline
}.footer-right {width: 300px;float: right
}.telephone {width: 100%;height: 32px;line-height: 32px;color: #fff
}.telephone span {display: inline-block;width: 32px;height: 32px;float: left;background: url(../images/phone_32px.png);margin-left: 16%
}.telephone .tel-number {font-size: 30px;font-weight: 400;text-align: right
}.official-plat {width: 100%;height: 100%;margin-top: 20px;position: relative
}.official-plat ul {float: right;margin-top: 7px
}.official-plat ul li span {display: inline-block;width: 32px;height: 32px;background: url(../images/plat_icon.png) no-repeat 0 0;line-height: 32px;float: left;margin-right: 12px
}.official-plat ul li .weibo-logo {background: url(../images/plat_icon.png) no-repeat -32px 0
}.official-plat ul li .qq-logo {background: url(../images/plat_icon.png) no-repeat -64px 0
}.official-plat ul li {height: 45px
}.official-plat ul a {display: inline-block;height: 32px;width: 100%;line-height: 32px;color: #fff;text-decoration: none;font-size: 12px
}.official-plat>p {display: inline-block;width: 132px;height: 132px;border: 1px solid #ddd;background-color: #fff
}.official-plat .weixin {position: absolute;top: 0;left: 10px;background-image: url(../images/plat_qrcode.png);background-repeat: no-repeat;background-position: 0 0
}.official-plat .weibo {position: absolute;top: 0;left: 10px;background-image: url(../images/plat_qrcode.png);background-repeat: no-repeat;background-position: -132px 0;display: none
}#wx-corner {border: 10px solid transparent;border-left: 10px solid #fff;position: absolute;top: 12px;right: -20px;z-index: 10
}#wb-corner {border: 10px solid transparent;border-left: 10px solid #fff;position: absolute;top: 58px;right: -20px;z-index: 10
}.five-superiority {width: 100%;border-bottom: 1px solid #27aede;padding: 10px 0 20px
}.five-superiority-list li {float: left;width: 20%;height: 36px;text-align: center;border-left: 1px solid #27aede
}.five-superiority-list li:first-child {border-left: none
}.five-superiority-list li a {display: inline-block;position: relative;width: 100%;height: 36px;line-height: 36px;background: no-repeat 2% center;text-indent: 2em;color: #fff;font-size: 16px
}.five-superiority-list li a:hover {color: #bfe7f5
}.five-superiority-list li a.superiority-text {text-indent: 4em
}.superiority-icon {position: absolute;width: 40px;height: 40px;left: 10%;background-repeat: no-repeat;background-image: url(../images/footer_youshi.png)
}.compensate_ico .superiority-icon {background-position: 0 0
}.compensate_ico:hover .superiority-icon {background-position: 0 -50px
}.retreat_ico .superiority-icon {background-position: 0 -100px
}.retreat_ico:hover .superiority-icon {background-position: 0 -150px
}.technology_ico .superiority-icon {background-position: 0 -200px
}.technology_ico:hover .superiority-icon {background-position: 0 -250px
}.prepare_ico .superiority-icon {background-position: 0 -300px
}.prepare_ico:hover .superiority-icon {background-position: 0 -350px
}.service_ico .superiority-icon {background-position: 0 -400px
}.service_ico:hover .superiority-icon {background-position: 0 -450px
}.marquee-box {overflow: hidden;width: 100%;position: absolute;left: 0;top: 0
}.marquee {width: 8000%;height: 60px
}.wave-list-box {float: left
}.wave-list-box ul {float: left;height: 60px;overflow: hidden;zoom: 1
}.wave-list-box ul li {height: 60px;width: 100%;float: left;line-height: 30px;list-style: none
}.wave-box {width: 100%;position: relative;height: 60px;
}

2、JS实现波浪效果

2.1 动画原理

其实这个地方是我们的核心动画代码,前面页面搭建就是为效果提供基础的保障,这个就是为页面提供灵魂性的东西,核心知识点在于jquery scrollLeft动画,因为scrollLeft主要用于获取或设置元素的水平滚动位置,通过定时器调整他的位置从而实现一种横向滚动的效果,别的也不多说,我直接贴代码吧。

2.2 动画源码

//波浪动画

$(function () {var marqueeScroll = function (id1, id2, id3, timer) {var $parent = $("#" + id1);var $goal = $("#" + id2);var $closegoal = $("#" + id3);$closegoal.html($goal.html());function Marquee() {if (parseInt($parent.scrollLeft()) - $closegoal.width() >= 0) {$parent.scrollLeft(parseInt($parent.scrollLeft()) - $goal.width());}else {$parent.scrollLeft($parent.scrollLeft() + 1);}}setInterval(Marquee, timer);}var marqueeScroll1 = new marqueeScroll("marquee-box", "wave-list-box1", "wave-list-box2", 20);var marqueeScroll2 = new marqueeScroll("marquee-box3", "wave-list-box4", "wave-list-box5", 40);
});

3、源码分享

3.1 百度网盘

链接:https://pan.baidu.com/s/1uqsY7WCa_tleJVR4w88FBg
提取码:hdd6

3.2 123云盘

链接:https://www.123pan.com/s/ZxkUVv-11I4.html
提取码:hdd6

3.3 邮箱留言

评论区留下您的邮箱账号,博主看到第一时间发给您,祝您生活愉快!


总结

以上就是今天要讲的内容,本文主要介绍了如何实现网站底部动态波浪效果,js实现页面波浪效果,前端页面实现网站底部波浪动态背景,jQuery网站底部动态波浪背景动画特效,也期待大家一起进步哈,2023年一起加油!!!

版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/19384.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java之Map接口

文章目录 简述Map中key-value特点 Map接口的常用方法Map的主要实现类&#xff1a;HashMapHashMap概述 Map实现类之二&#xff1a;LinkedHashMapMap实现类之三&#xff1a;TreeMapMap实现类之四&#xff1a;Hashtable&#xff08;古老实现类&#xff09;Map实现类之五&#xff1…

AI 3D结构光技术加持,小米引领智能门锁新标准

一直以来&#xff0c;小米智能门锁系列产品让更多家庭走进了安全便捷的智能生活&#xff0c;安全至上的设计让很多家庭都轻松告别了随身钥匙。 7月27日&#xff0c;小米正式推出小米智能门锁M20 Pro&#xff0c;再一次引领智能门锁产品的发展潮流。该款门锁采用AI 3D结构光技术…

2023软件设计师中级备考经验分享(文中有资料链接分享)

先摊结论吧&#xff0c;软考中级设计师备考只是备考半个月&#xff08;期间还摆烂了几天&#xff09;&#xff0c;然而成绩如下&#xff1a; 我自己都没想到会这么好的成绩。。。 上午题&#xff1a;推荐把软考通APP里的历年真题刷3-4遍&#xff0c;直接刷真题&#xff0c;然后…

关于 Ubuntu 长按 shift 无效, 按 Esc 直接进入 grub 改密码的解决方法

本次长按shift没有反应&#xff0c;直接进入了系统界面&#xff0c;所以改用长按Esc键&#xff0c;步骤如下&#xff1a; 1. 长按esc&#xff0c;进入grub>提示 2.输入grub>normal &#xff0c;回车 3.上一步回车后&#xff0c;继续敲击Esc &#xff0c;出现grub界面 …

无法加载 DLL“xxxx.dll”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E)。

目录 1、DLL引用的问题 1、DLL引用的问题 这两篇文章说的很好&#xff0c;C# DllImport用法和路径问题和无法加载 DLL“xxxx.dll”: 找不到指定的模块 但我折腾了2天&#xff0c;还是没有解决。后来请同事帮忙&#xff0c;发现&#xff0c;服务器上少装东西了…下图的红框这个…

java学习路程之篇四、进阶知识、石头迷阵游戏、绘制界面、打乱石头方块、移动业务、游戏判定胜利、统计步数、重新游戏

文章目录 1、绘制界面2、打乱石头方块3、移动业务4、游戏判定胜利5、统计步数6、重新游戏7、完整代码 1、绘制界面 2、打乱石头方块 3、移动业务 4、游戏判定胜利 5、统计步数 6、重新游戏 7、完整代码 java之石头迷阵单击游戏、继承、接口、窗体、事件、组件、按钮、图片

深度学习——常见注意力机制

1.SENet SENet属于通道注意力机制。2017年提出&#xff0c;是imageNet最后的冠军 SENet采用的方法是对于特征层赋予权值。 重点在于如何赋权 1.将输入信息的所有通道平均池化。 2.平均池化后进行两次全连接&#xff0c;第一次全连接链接的神经元较少&#xff0c;第二次全连…

【HarmonyOS】键盘遮挡输入框时,实现输入框显示在键盘上方

【关键字】 harmonyOS、键盘遮挡input&#xff0c;键盘高度监听 【写在前面】 在使用API6、API7开发HarmonyOS应用时&#xff0c;常出现页面中需要输入input&#xff0c;但是若input位置在页面下方&#xff0c;在input获取焦点的时候&#xff0c;会出现软键盘挡住input情况&a…

数字图像处理-彩色图像处理

文章目录 一、彩色模型1.1RGB彩色模型1.2CMY和CMYK彩色模型1.3HSI彩色模型 二、伪彩色图像处理2.1灰度分层2.2灰度到彩色的变换 三、彩色图像的分割3.1RGB中的彩色图像分割3.2彩色边缘检测 一、彩色模型 1.1RGB彩色模型 RGB空间是生活中最常用的一个模型&#xff0c;电视机、…

手写自定义的spring-boot-start

需求&#xff1a;手写一个加密的spring-boot-start&#xff0c;按着用户定义的加密算法&#xff08;可选&#xff1a;MD5、SHA&#xff09;去加密内容 新建一个maven项目 新建好的项目结构和pom.xml如图 添加pom.xml 完整的pom.xml文件 <?xml version"1.0" …

25.6 matlab里面的10中优化方法介绍——模拟退火算法(matlab程序)

1.简述 相信没有相关物理知识背景的小伙伴看到“退火”二字是一脸懵逼的...固体的退火过程指的是将固体加热至足够高的温度&#xff0c;再使其慢慢冷却的过程。在加热过程中&#xff0c;原本有序排列的内部粒子开始无序运动&#xff0c;此时固体的内能不断增大&#xff1b;而在…

大数据面试题:HBase的RegionServer宕机以后怎么恢复的?

面试题来源&#xff1a; 《大数据面试题 V4.0》 大数据面试题V3.0&#xff0c;523道题&#xff0c;679页&#xff0c;46w字 可回答&#xff1a;1&#xff09;HBase一个节点宕机了怎么办&#xff1b;2&#xff09;HBase故障恢复 参考答案&#xff1a; 1、HBase常见故障 导…

SpringMVC学习记录

SpringMVC技术与servlet技术功能等同&#xff0c;均属于web层开发技术 SpringMVC简介 SpringMVC概述 SpringMVC是一种基于Java实现MIVC模型的轻量级web框架 优点 使用简单&#xff0c;开发便捷&#xff08;相比于servlet)灵活性强 SpringMVC是一种表现层框架技术 Spring…

忘记数据库密码如何处理

windows 5.6.51版本及以前 #当前账号设置密码 set password password(123456); #当前账号取消密码 set password ; &#xff08;1&#xff09;用管理员身份打开控制台输入 net stop m5&#xff08;我的电脑MySQL名字为m5&#xff0c;根据自己的更改&#xff09; &#xff08;…

maven下载安装及初次使用相关配置

maven下载按照及初次使用相关配置 一、下载 与安装 下载完解压放在文件夹中即可&#xff01; 依赖Java&#xff0c;需要配置JAVA_HOME设置MAVEN自身的运行环境&#xff0c;需要配置MAVEN_HOME&#xff08;参考安装java&#xff09;测试环境配置结果 MVN测试成功&#xff01…

Redis 高可用之持久化

目录 一、Redis 高可用 1.1 什么是高可用 1.2 Redis的高可用技术 二、Redis持久化 2.1 持久化的功能 2.2 Redis提供两种方式进行持久化&#xff1a; 三、RDB持久化 3.1 触发条件 &#xff08;1&#xff09;手动触发 &#xff08;2&#xff09;自动触发 &#xff08;3…

UG\NX 二次开发 选择相切面、相邻面的选择面控件

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan 简介&#xff1a; 有群友问“UFUN多选功能过滤面不能选择相切面或相邻面之类的吗&#xff1f;” 这个用Block UI的"面收集器"就可以&#xff0c;ufun函数是不行的。 效果&am…

12-4_Qt 5.9 C++开发指南_创建和使用共享库

文章目录 1. 创建共享库2. 使用共享库2.1 共享库的调用方式2.2 隐式链接调用共享库2.3 显式链接调用共享库 1. 创建共享库 除了静态库&#xff0c;Qt 还可以创建共享库&#xff0c;也就是 Windows 平台上的动态链接库。动态链接库项目编译后生成 DLL 文件&#xff0c;DLL 文件…

docker 保存和载入镜像

查看本机docker镜像 docker images保存镜像 docker save -o /home/space/work1/docker_qnx7.1.tar.gz a01ee6d74c36复制镜像到其他服务器 scp /home/space/work1/docker_qnx7.1.tar.gz XXXIP:/home/dell/work1/登录新 服务器操作 docker load -i docker_qnx7.1.tar.gz载入后…

网络安全/信息安全—学习笔记

一、网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防两面…