QQ客服
当前位置 : 首页 > 代码 > 网页特效 > div css > 蓝色的建站网站页脚布局代码

原创商用 蓝色的建站网站页脚布局代码

jQuery基于数字滚动插件制作,蓝色的建站公司网站页面滚动,项目统计数字累加和页脚快速导航布局样式代码。这是一款简洁大气的页面底部样式代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

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

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="product-number-info" id="productNumber">
	<div class="product-number-inner">
		<ul class="q">
			<li class="li-1"><b><i id="productNumber_1" data-sum="1760093">0</i><sup>+</sup></b>
				<p>公司优选</p>
			</li>
			<li class="li-2"><b><i id="productNumber_2" data-sum="3687">0</i><em>天</em></b>
				<p>安全运行</p>
			</li>
			<li class="li-3"><b><i id="productNumber_3" data-sum="150">0</i><sup>+</sup></b>
				<p>覆盖行业和类目</p>
			</li>
			<li class="li-4"><b><i id="productNumber_4" data-sum="1429">0</i><em>万</em></b>
				<p>件商品销售中</p>
			</li>
			<li class="li-5"><b><i id="productNumber_5" data-sum="3460990">0</i><sup>+</sup></b>
				<p>个订单为企业带来</p>
			</li>
		</ul>
	</div>
</div>

<div class="copyright">
	<div class="copyright_c">
		<div class="copyright_head">
			<div class="copyright_L">
				<p><img src="statics/images/logo.png" /></p>
				<span>
			<em>服务时间:</em>
			<em>周一至周日  9:00-18:00</em>
		</span>
				<span>
			<em>客服电话:</em>
			<strong>4000-000-0000</strong>
		</span>
				<span>
			<em>客服QQ:</em>
			<a href="#" >在线交谈</a>
		</span>
			</div>
			<div class="copyright_C">
				<div class="copyright_C_list">
					<p>关于我们</p>
					<div class="about">
						<a href="#">公司简介</a>
					</div>
					<div class="about">
						<a href="#">知识产权</a>
					</div>
					<div class="about">
						<a href="#">联系我们</a>
					</div>
				</div>
				<div class="copyright_C_list">
					<p>产品服务</p>
					<div class="about">
						<a href="#">云官网</a>
						<a href="#">云商城</a>
					</div>
					<div class="about">
						<a href="#">云分销</a>
						<a href="#">微圈儿</a>
					</div>
					<div class="about">
						<a href="#">小程序</a>
						<a href="#">小程序加盟</a>
					</div>
				</div>
				<div class="copyright_C_list">
					<p>建站学院</p>
					<div class="about">
						<a href="#">服务市场</a>
						<a href="#">城市建站</a>
					</div>
					<div class="about">
						<a href="#">帮助中心</a>
						<a href="#">快递查询</a>
					</div>
					<div class="about">
						<a href="#">建站学院</a>
					</div>
				</div>
			</div>
			<div class="copyright_R">
				<span><img src="statics/images/ewm1.jpg"  /></span>
				<p>扫描关注微信公众号</p>
			</div>
		</div>
		<div class="copyright_bottom">
			<span>京B2-xxxxxxx 京公海网安备1101080xxxxxxx号 京ICP备xxxxxxxx号-32   </span>
			<p>建站创建能为您带去订单的网站</p>
		</div>
	</div>
</div>


<!--数字滚动插件countUp-->
<script src="statics/js/count.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
参数
target = 目标元素的 ID;
startVal = 开始值;
endVal = 结束值;
decimals = 小数位数,默认值是0;
duration = 动画延迟秒数,默认值是2;
具体用法参考:http://inorganik.github.io/countUp.js/
*/
productNumber=function (){
	var arr = [];
	$('#productNumber li').each(function(i, dom) {
		var iDom = $(dom).find('i'),
			decimals = 0,
			sum = iDom.data('sum');
		//初始化传参,参数为上面注释中的参数    
		arr.push(new CountUp(iDom.attr('id'), 0, sum, decimals, 4, {
			useEasing: true,//效果
			separator: ''//数字分隔符
		}));
		arr[i].start();
	});
}();			
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了