微信号:WEB_wysj

介绍:平台每天更新最实用,最新颖的网页设计、网站制作技巧精品文章,分享html+css、JavaScript、jQuery,ps等直播课录像,国内知名设计师亲授!无论你身在何处,和大家一起来利用零碎的时间学习知识,涨见识、涨工资吧!

JQuery实现数字滚动增加的效果

2015-09-21 17:41 网页设计自学平台

提示点击上方"蓝色字体"可订阅!


  
            
  
            
  
            
  
            
摘要 51RGB官方微信
因为项目要求,要做一个数字滚动增加的效果。在网上没有找到好的插件,所以就自己做了一个,供大家参考。


先来看一下效果,看看你们需不需要:


这个动画效果,只支持8位数字(包括小数点后两位),需要其他的,可以自己看看修改一下

先上html代码:
<div class="flip">
        <div class="price-icon">¥</div>
        <div class="price-div">
          <div class="h-k number"></div>
          <div class="t-k number"></div>
          <div class="k number"></div>
          <div class="comma sign">,</div>
          <div class="h number"></div>
          <div class="t number"></div>
          <div class="single number"></div>
          <div class="sign dot">.</div>
          <div class="t-d number"></div>
          <div class="h-d number"></div>
        </div>
      </div>

完全写死了各个位置,因为我这里需求就只到十万位,所以代码做的不灵活。

然后再上css代码:(这里只是做了最基本的样式,其实没啥,可以忽略。

#container {
  background: black;
}

.flip {
  margin: 0 auto;
  width: 500px;
  height: 100px;
  color: yellow;
  padding-top: 40px;
}

.price-div {
  font: 12px tahoma, Arial, Verdana, sans-serif;
}

.price-div > div,
.total-price > div {
  float: left;
  text-align: center;
}

.price-icon {
  background: dimgrey;
  width: 25px;
  height: 30px;
  line-height: 30px;
  font-size: 26px;
  font-weight: bold;
  float: left;
  margin-right: 2px;
}

.price-div .number {
  background: dimgrey;
  width: 32px;
  height: 48px;
  line-height: 48px;
  font-size: 43px;
  font-weight: bold;
  overflow: hidden;
  margin-right: 1px;
}

.price-div .sign {
  font-size: 40px;
  font-weight: bold;
  line-height: 68px;
  height: 48px;
}
然后是js代码:
首先,由于牵扯到各种加减乘除计算,由于众所周知的原因,js的加减乘除会有坑,所以自己写一个:
//乘法函数  
function accMul(arg1, arg2) {  
    var m = 0, s1 = arg1.toString(), s2 = arg2.toString();  
    try {  
        m += s1.split(".")[1].length;  
    }  
    catch (e) {  
    }  
    try {  
        m += s2.split(".")[1].length;  
    }  
    catch (e) {  
    }  
    return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);  
}   

//给Number类型增加一个mul方法,使用时直接用 .mul 即可完成计算。   
Number.prototype.mul = function (arg) {  
    return accMul(arg, this);  
};   

//除法函数  
function accDiv(arg1, arg2) {  
    var t1 = 0, t2 = 0, r1, r2;  
    try {  
        t1 = arg1.toString().split(".")[1].length;  
    }  
    catch (e) {  
    }  
    try {  
        t2 = arg2.toString().split(".")[1].length;  
    }  
    catch (e) {  
    }  
    with (Math) {  
        r1 = Number(arg1.toString().replace(".", ""));  
        r2 = Number(arg2.toString().replace(".", ""));  
        return (r1 / r2) * pow(10, t2 - t1);  
    }  
}   
//给Number类型增加一个div方法,,使用时直接用 .div 即可完成计算。   
Number.prototype.div = function (arg) {  
    return accDiv(this, arg);  
};
function accAdd(arg1, arg2) {  
    var r1, r2, m;  
    try {  
        r1 = arg1.toString().split(".")[1].length;  
    }  
    catch (e) {  
        r1 = 0;  
    }  
    try {  
        r2 = arg2.toString().split(".")[1].length;  
    }  
    catch (e) {  
        r2 = 0;  
    }  
    m = Math.pow(10, Math.max(r1, r2));  
    return (arg1.mul(m) + arg2.mul(m)).div(m);  
}   

//给Number类型增加一个add方法,,使用时直接用 .add 即可完成计算。   
Number.prototype.add = function (arg) {  
    return accAdd(arg, this);  
};  

  
//减法函数  
function Subtr(arg1, arg2) {  
    var r1, r2, m, n;  
    try {  
        r1 = arg1.toString().split(".")[1].length;  
    }  
    catch (e) {  
        r1 = 0;  
    }  
    try {  
        r2 = arg2.toString().split(".")[1].length;  
    }  
    catch (e) {  
        r2 = 0;  
    }  
    m = Math.pow(10, Math.max(r1, r2));  
     //last modify by deeka  
     //动态控制精度长度  
    n = (r1 >= r2) ? r1 : r2;  
    return parseFloat(((arg1 * m - arg2 * m) / m).toFixed(n));  
}  
  
//给Number类型增加一个add方法,,使用时直接用 .sub 即可完成计算。   
Number.prototype.sub = function (arg) {  
    return Subtr(this, arg);  
};

然后就是主要的部分了:

var $hk = $(".h-k"); // Ê®Íò
var $tk = $(".t-k"); // Íò
var $k = $(".k"); // ǧ
var $h = $(".h"); // °Ù
var $t = $(".t"); // Ê®
var $single = $(".single"); // ¸ö
var $td = $(".t-d"); // Ê®·Öλ
var $hd = $(".h-d"); // °Ù·Öλ
var $comma = $(".comma.sign");
var $dot = $(".dot.sign");

var data = {
  numbers: ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"],
  targetClass: {
    "hk": $hk,
    "tk": $tk,
    "k": $k,
    "h": $h,
    "t": $t,
    "single": $single,
    "td": $td,
    "hd": $hd
  },
  zero: {
    hk: 0,
    tk: 0,
    k: 0,
    h: 0,
    t: 0,
    single: 0,
    td: 0,
    hd: 0
  },
  numbersTmp: ""
};

(function (){
  function numberDiv(num){
    return "<div class='" + data.numbers[num] + "'>" + num + "</div>";
  }
  
  for(var i = 0; i < 10; i ++) {
    data.numbersTmp += numberDiv(i);
  }
  
  $(".price-div .number").append("<div class='numbers-view'>" + data.numbersTmp + "</div>");
})();


上面是基础数据,由于我们这里需要粘贴0-9的div,所以用英语数字作为class,便于查找。由于这里是对每一个位置进行动画,所以这里用obj来处理。

然后是两个功能性的方法:priceToObj和objToPrice

function priceToObj(price){
  if(price == 0) {
    return data.zero;
  }
  var obj = {};
  obj.hd = parseInt((price.mul(100)) % 10);
  obj.td = parseInt((price.mul(10)) % 10);
  obj.single = parseInt(price % 10);
  obj.t = parseInt((price.div(10)) % 10);
  obj.h = parseInt((price.div(100)) % 10);
  obj.k = parseInt((price.div(1000)) % 10);
  obj.tk = parseInt((price.div(10000)) % 10);
  obj.hk = parseInt((price.div(100000)) % 10);
  return obj;
}

function objToPrice(obj) {
  return obj.hk.mul(100000).add(obj.tk.mul(10000))
      .add(obj.k.mul(1000)).add(obj.h.mul(100))
      .add(obj.t.mul(10)).add(obj.single)
      .add(obj.td.div(10)).add(obj.hd.div(100));
}

最后的动画方法:

$.fn.extend({
  scrollToNumber: function(num, pos){
    var $this = $(this);
    var target = data.numbers[num];

    $this.find(".numbers-view").stop(true, true);

    var top = num * $this.find(".zero").height();
    var currentTop = -parseFloat($this.find(".numbers-view").css("marginTop").split("px")[0]);
    
    if(top == currentTop) {
      return;
    } else if(currentTop < top) {
      $this.find(".numbers-view").animate({marginTop: -top}, 1500, "swing");
    } else {
      $this.find(".numbers-view").append($(data.numbersTmp).addClass("temp"));
      top = $this.find("." + target + ".temp").offset().top - $this.find(".numbers-view").offset().top;
      
      $this.find(".numbers-view").animate({marginTop: -top}, 1500, "swing", function(){
        if($this.find(".zero").size() > 1) {
          var top = $this.find("." + target + ":not(.temp)").first().offset().top - $this.find(".numbers-view").offset().top;
          $this.find(".numbers-view").css({marginTop: -top});
          $this.find(".numbers-view .temp").remove();
        }
      });
    }
  }
})

$.animateToPrice = function(price){
  var obj = priceToObj(price);
  
  $.each(obj, function(key, value){
    data.targetClass[key].scrollToNumber(value, key);
  });
};

在上一个动画没完,下一个动画开始的时候,先把之前的动画停止,并执行到最后,所以会有感觉卡顿的情况出现。。。暂时不知道怎么解决

整个滚动效果,通过调用$.animateToPrice(price)来进行操作。


关于我们 51RGB官方微信

51RGB在线教育 (www.51rgb.com) :聘请WEB前端开发高级讲师,现任职腾讯UED前端开发工程师。曾就职于卓望信息前端工程师。从事前端开发8年,在卓望期间负责移动微博的前端页面架构及开发工作。来到腾讯之后主要做手机端HTML5方向。网页前端技术一流,大型企业实战经验丰富。期待你的加入!


官方QQ群:190166743

微信:tyacheng

客服电话:400 110 9151




点击“阅读原文”,进入“51RGB官方网站”哦!

↓↓↓

 
网页设计自学平台 更多文章 【简单】纯CSS3画出小黄人并实现动画效果 本周上课表 ps学习教程 风景素材怎么用?来看这组把自然风光大图做背景的网页设计 吃货界面设计参考
猜您喜欢 探索式测试基础系列——蜜月旅行 我是不是该安静的睡去? 新的一年,做一个堂堂正正的人 聊聊代码规范 程序员提高效率的一些建议