jQuery网站底部动态波浪背景特效代码下载



12 46 16



特效描述:网站底部 动态波浪背景,jQuery网站底部动态波浪背景特效代码下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>

3. HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
</head>
<body >
<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="https://www.51qianduan.com/">51前端</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="https://www.51qianduan.com/">51前端</a></li>
					</ul>
				</div>
			</div>
			<div class="clear-float"></div>
		</div>
	</div>
	<div class="footer-floor2">
	</div>
</div>
<!-- footer end -->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p></p>
<p></p>
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字标签 文字提示框 彩色文字 提示框/弹出层 文字闪烁 layer 打字机 lightbox 文字列表 Tooltip工具提示框 文字弹幕 浮动提示框 文字高亮 html5弹窗动画 文字叠加 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 360全景 html5文字动画 文字滚动 文字滑动 文字切换 弹出层拖动 窗口提示框 图片文字 文字导航菜单 文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到