js问题求助

baidu_34185745 2016-03-08 06:13:19

今天在本版几位大神的帮助下终于搞定了滚动延迟和背景的问题，新的问题又出现了，能不能把js里面的

    '<div class="mt-number-animate-dom" data-num="{{num}}">\

            <span class="mt-number-animate-span">0</span>\

            <span class="mt-number-animate-span">1</span>\

            <span class="mt-number-animate-span">2</span>\

            <span class="mt-number-animate-span">3</span>\

            <span class="mt-number-animate-span">4</span>\

            <span class="mt-number-animate-span">5</span>\

            <span class="mt-number-animate-span">6</span>\

            <span class="mt-number-animate-span">7</span>\

            <span class="mt-number-animate-span">8</span>\

            <span class="mt-number-animate-span">9</span>\

            <span class="mt-number-animate-span">.</span>\

          </div>';  ;

放在htrml里执行，而不是放在js里。恳请各位大牛再帮忙改一下

这是完整代码

<html>

<head>

<title>数字滚动插件</title>

<meta charset="gb2312">

<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>

<style>

/*数字滚动插件的CSS可调整样式*/

.mt-number-animate{ font-family: '微软雅黑'; line-height:40px; height: 40px;/*设置数字显示高度*/; font-size: 18px;/*设置数字大小*/ overflow: hidden; display: inline-block; position: relative; }

.mt-number-animate .mt-number-animate-dot{ width: 15px;/*设置分割符宽度*/ line-height: 40px; float: left; text-align: center;}

.mt-number-animate .mt-number-animate-dom{ width: 20px;/*设置单个数字宽度*/ text-align: center; float: left; position: relative; top: 0;}

.mt-number-animate .mt-number-animate-dom .mt-number-animate-span{ width: 18px; float: left; background-image: url(有边框的背景图片)}

</style>

</head>

<body>

<br><br>

无分隔符，无小数点：<div class="numberRun4"></div>

  

</body>

<script>

;(function($) {

  $.fn.numberAnimate = function(setting) {

    var defaults = {

      speed : 1000,//动画速度

      num : "", //初始化值

      iniAnimate : true, //是否要初始化动画效果

      symbol : '',//默认的分割符号，千，万，千万

      dot : 0 //保留几位小数点

    }

    //如果setting为空，就取default的值

    var setting = $.extend(defaults, setting);

  

    //如果对象有多个，提示出错

    if($(this).length > 1){

      alert("just only one obj!");

      return;

    }

  

    //如果未设置初始化值。提示出错

    if(setting.num == ""){

      alert("must set a num!");

      return;

    }

    var nHtml = '<div class="mt-number-animate-dom" data-num="{{num}}">\

            <span class="mt-number-animate-span">0</span>\

            <span class="mt-number-animate-span">1</span>\

            <span class="mt-number-animate-span">2</span>\

            <span class="mt-number-animate-span">3</span>\

            <span class="mt-number-animate-span">4</span>\

            <span class="mt-number-animate-span">5</span>\

            <span class="mt-number-animate-span">6</span>\

            <span class="mt-number-animate-span">7</span>\

            <span class="mt-number-animate-span">8</span>\

            <span class="mt-number-animate-span">9</span>\

            <span class="mt-number-animate-span">.</span>\

          </div>';

  

    //数字处理

    var numToArr = function(num){

      num = parseFloat(num).toFixed(setting.dot);

      if(typeof(num) == 'number'){

        var arrStr = num.toString().split("");  

      }else{

        var arrStr = num.split("");

      }

      //console.log(arrStr);

      return arrStr;

    }

  

    //设置DOM symbol:分割符号

    var setNumDom = function(arrStr){

      var shtml = '<div class="mt-number-animate">';

      for(var i=0,len=arrStr.length; i<len; i++){

        if(i != 0 && (len-i)%3 == 0 && setting.symbol != "" && arrStr[i]!="."){

          shtml += '<div class="mt-number-animate-dot">'+setting.symbol+'</div>'+nHtml.replace("{{num}}",arrStr[i]);

        }else{

          shtml += nHtml.replace("{{num}}",arrStr[i]);

        }

      }

      shtml += '</div>';

      return shtml;

    }

  

    //执行动画

    var runAnimate = function($parent){

      $parent.find(".mt-number-animate-dom").each(function() {

        var num = $(this).attr("data-num");

        num = (num=="."?10:num);

        var spanHei = $(this).height()/11; //11为元素个数

        var thisTop = -num*spanHei+"px";

        if(thisTop != $(this).css("top")){

          if(setting.iniAnimate){

            //HTML5不支持

            if(!window.applicationCache){

              $(this).animate({

                top : thisTop

              }, setting.speed);

            }else{

              $(this).css({

                'transform':'translateY('+thisTop+')',

                '-ms-transform':'translateY('+thisTop+')',   /* IE 9 */

                '-moz-transform':'translateY('+thisTop+')',  /* Firefox */

                '-webkit-transform':'translateY('+thisTop+')', /* Safari 和 Chrome */

                '-o-transform':'translateY('+thisTop+')',

                '-ms-transition':setting.speed/1000+'s',

                '-moz-transition':setting.speed/1000+'s',

                '-webkit-transition':setting.speed/1000+'s',

                '-o-transition':setting.speed/1000+'s',

                'transition':setting.speed/1000+'s'

              }); 

            }

          }else{

            setting.iniAnimate = true;

            $(this).css({

              top : thisTop

            });

          }

        }

      });

    }

  

    //初始化

    var init = function($parent){

      //初始化

      $parent.html(setNumDom(numToArr(setting.num)));

      runAnimate($parent);

    };

  

    //重置参数

    this.resetData = function(num){

      var newArr = numToArr(num);

      var $dom = $(this).find(".mt-number-animate-dom");

      if($dom.length < newArr.length){

        $(this).html(setNumDom(numToArr(num)));

      }else{

        $dom.each(function(index, el) {

          $(this).attr("data-num",newArr[index]);

        });

      }

      runAnimate($(this));

    }

    //init

    init($(this));

    return this;

  }

})(jQuery);

  

$(function(){

  

  

  var numRun4 = $(".numberRun4").numberAnimate({num:'52353434', speed:2000});

  

});

</script>

</html>