[Efectos especiales dinámicos de onda] Realice el efecto de animación de onda en la parte inferior de la página basado en jquery (con la descarga completa del código fuente)

Language 2023-08-15 21:01:49 views: null

Directorio de artículos

escrito en frente

Presumiblemente, la mayoría de las personas que han creado el sitio web oficial de la empresa están familiarizadas con este efecto, especialmente en la industria front-end con tanto volumen ahora, muchos efectos especiales son deslumbrantes y varios componentes también están surgiendo uno tras otro, lo que tiene que desanimar a mucha gente, así que creé esta obra maestra sin parar. Solo espero que todos puedan aprender algo, y por favor escúchenme a continuación.

Puntos de conocimiento involucrados

¿Cómo se da cuenta Jquery de la animación de onda inferior, cómo se da cuenta del efecto de onda dinámica en la parte inferior del sitio web, js se da cuenta del efecto de onda de la página, la página frontal se da cuenta del fondo dinámico de la onda en la parte inferior del sitio web, y el efecto de animación de fondo de onda dinámica en la parte inferior del sitio web de jQuery.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

lograr efecto

Esto es principalmente para brindarle comentarios sobre el efecto de implementación final, y el enlace para compartir el paquete de código completo se adjunta al final del artículo.
inserte la descripción de la imagen aquí

1. Construya la página

1.1 Crear dos áreas

Cree dos contenedores div, que se utilizan para almacenar cajas con diferentes efectos. Adopto un método de diseño relativo, principalmente configurando estilos y html, y los efectos son los siguientes:
inserte la descripción de la imagen aquí

La estructura html es la siguiente:

<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 Crear área de olas

De hecho, en la parte A, ya creamos dos divs y luego agregamos efectos de onda al área de onda. Por supuesto, el núcleo aquí es usar la imagen de fondo, pero no es la imagen grande imaginada. Usé dos imágenes. con el propósito de El efecto dinámico de las dos imágenes, desplazándose hacia adelante y hacia atrás para formar un efecto de onda.
Primero ponga un efecto de onda (el color de fondo se cambia a gris para una fácil distinción):
inserte la descripción de la imagen aquí

En este punto, se crea una ola, solo configure la imagen de fondo.
Agregue otro efecto en forma de diseño relativo de la siguiente manera:
inserte la descripción de la imagen aquí

Cuando finalmente configuremos el color de fondo para que sea el mismo que el de una de las ondas, habrá un efecto de onda.
inserte la descripción de la imagen aquí

Al final, es el proceso de enriquecimiento de elementos. Primero publicaré el código específico y, por supuesto, puede descargar el paquete completo al final del artículo.
El efecto final de página estática enriquecida (sin ondas) es el siguiente:
inserte la descripción de la imagen aquí

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

1.3 Código fuente de la página estática

Código HTML como se muestra

<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>

Se muestra el código 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 se da cuenta del efecto de onda

2.1 Principios de la animación

De hecho, este lugar es nuestro código de animación central. La construcción de la página anterior es para proporcionar una garantía básica para el efecto. Esto es para proporcionar el alma de la página. El punto de conocimiento central radica en la animación jquery scrollLeft, porque scrollLeft es principalmente utilizado para obtener o establecer el nivel de los elementos Posición de desplazamiento, ajuste su posición a través del temporizador para lograr un efecto de desplazamiento horizontal, no hay mucho más que decir, publicaré el código directamente.

2.2 Código fuente de animación

// animación de onda

$(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. Compartir código fuente

3.1 Disco de red de Baidu

Enlace: https://pan.baidu.com/s/1uqsY7WCa_tleJVR4w88FBg
Código de extracción: hdd6

3.2 123 disco en la nube

Enlace: https://www.123pan.com/s/ZxkUVv-11I4.html
Código de extracción: hdd6

3.3 Mensaje de correo electrónico

Deja tu cuenta de correo electrónico en el área de comentarios, y el blogger te lo enviará tan pronto como lo vea. ¡Te deseo una vida feliz!

Resumir

De lo anterior es de lo que quiero hablar hoy. Este artículo presenta principalmente cómo realizar el efecto de onda dinámica en la parte inferior del sitio web. JS realiza el efecto de onda de la página. ¡Vamos en 2023! ! !

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

Supongo que te gusta

Origin blog.csdn.net/hdp134793/article/details/132065905
Recomendado
Clasificación
Diario
Más
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)

Code World

© 2018 codetd.com