百度地图首页板块
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
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
