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

编程语言 2023-08-15 19:47:06 阅读次数: 0

文章目录

写在前面

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

涉及知识点

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"><span
										class="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博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

猜你喜欢

转载自blog.csdn.net/hdp134793/article/details/132065905
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022