jQuery基于数字滚动插件制作,蓝色的建站公司网站页面滚动,项目统计数字累加和页脚快速导航布局样式代码。这是一款简洁大气的页面底部样式代码。
使用方法:
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>