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>