jQuery countup.js鼠标滚动页面数字动画特效



145 577 193



特效描述:鼠标滚动页面 数字动画特效,jQuery countup.js当鼠标滚轮滚动到一定的位置后触发数字累加动画特效

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/countUp.min.js"></script>

3. HTML代码

<div id="wrap">
	<section>
		<h1 class="jumbo" id="myTargetElement">1890</h1>
		<h1 class="jumbo" id="myTargetElement2">15894</h1>
		<h1 class="jumbo" id="myTargetElement3">1890</h1>
	</section>
</div>
<script type="text/javascript">
	var options = {
  useEasing : true, 
  useGrouping : true, 
  separator : ',', 
  decimal : '.', 
  prefix : '', 
  suffix : '' 
};
var demo = new CountUp("myTargetElement", 0, 1890, 0, 2.5, options);
var demo2 = new CountUp("myTargetElement2", 0, 15894, 0, 2.5, options);
var demo3 = new CountUp("myTargetElement3", 0, 385, 0, 2.5, options);
$(window).scroll(function(){
	if($(window).scrollTop()>=600){
		demo.start();
		demo2.start();
		demo3.start();
	}
})
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到