jQuery数字变化滚动效果代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

9 34 12



特效描述:数字变化滚动。最近需要用到一个数字滚动的效果,首先定位有个效果就好,滚动速度不需要严格的把控,自己坐了一个demo主要用到以下两点 1、jquery animate方法的使用 2、js的数组操作 parseInt charAt方法等等

代码结构

1. 引入JS

<script src="js/jquery.js"></script>

2. HTML代码

	<div class="js-box box"></div>
<script type="text/javascript">
$(function(){
	  var Event = {
	    // 例 510,085.00
	    number: function(digit){
	      var num_arr=[];
	      for(var i = 0;i<digit.length;i++){
	        num_arr.push(digit.charAt(i));
	      }
	      return num_arr;
	    },
	    dom: function(arr){
	      var str = '';
	      for(var i = 0;i<arr.length;i++){
	        if(parseInt(arr[i])>=0){
	          str += '<div class="l js-l-box digit-container" data-show='+arr[i]+'>\
	                  <span>0</span>\
	                  <span>1</span>\
	                  <span>2</span>\
	                  <span>3</span>\
	                  <span>4</span>\
	                  <span>5</span>\
	                  <span>6</span>\
	                  <span>7</span>\
	                  <span>8</span>\
	                  <span>9</span>\
	                </div>';
	        }else{
	           str += '<div class="sign-box l"><span>'+arr[i]+'</span></div>';
	        }
	      }
	      return str;
	    },
	    animation: function(){
	      var height = $(".js-box").height();
	      $(".js-l-box").each(function(i){
	        var num = parseInt($(this).data("show"));
	        var scrollTop = 0;
	          var scrollTop = height * num;
	          $(this).css("margin-top",0);
	          $(this).animate({marginTop: -scrollTop},1500);
	          console.log(scrollTop);
	      });
	    }
	  };
	  var final_arr = Event.number('510,085.12');
	  $(".js-box").html(Event.dom(final_arr));
	  Event.animation();
	});
</script>



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


热门标签: 滚动导航菜单 滚动切换 图片滚动 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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