爱站程序员基地百度地图API首页数字动态改变特效
- 百度地图首页板块
- 代码片段html
百度地图首页板块
1.昨天做网站领导需要一个浏览器窗口滚动到当前位置数字开始变动到指定位置，现在我把代码分享给大家。
代码片段html
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"><title>Document</title><style>*{margin: 0;padding: 0;}.box{height: 2000px;border-bottom:5px solid red;}.wrap{width:1200px;margin:30px auto;}.wrap p{width:200px;float:left;margin:0 50px;font-size:50px;color:#ff6700;}</style></head><body><div class=\"box\"></div><div class=\"wrap\"><p><strong class=\"serve\">0</strong>亿</p><p><strong class=\"percent\">0</strong>%</p><p><strong class=\"web\">0</strong>万</p><p><strong class=\"person\">0</strong>万</p></div><div class=\"box\"></div><!-- <script src=\"jquery-1.12.4.min.js\"></script> --><script src=\"jquery-1.8.3.min.js\"></script><script>$(function(){$(window).scroll(function(){var sctop = $(window).scrollTop();if($(\'.wrap\').offset().top - sctop < 500){console.log(1)$(\'.serve\').animate({count:1200},{queue:true,duration:2000,step:function(now,fx){// console.log(now,fx)var num = parseInt(now).toString().replace(/(?=(\\B)(\\d{3})+$)/g,\',\')$(\'.serve\').text(num)}})$(\'.percent\').animate({count:75},{queue:true,duration:2000,step:function(now,fx){// console.log(now,fx)var num = parseInt(now).toString()$(\'.percent\').text(num)}})$(\'.web\').animate({count:65},{queue:true,duration:2000,step:function(now,fx){// console.log(now,fx)var num = parseInt(now).toString()$(\'.web\').text(num)}})$(\'.person\').animate({count:165},{queue:true,duration:2000,step:function(now,fx){// console.log(now,fx)var num = parseInt(now).toString()$(\'.person\').text(num)}})}})})</script></body></html>
下面给大家放上js下载地址：http://www.hj1992.com/js/jquery-1.8.3.min.js
