一个jquery数字滚动插件,当一个页面多次引用时发生冲突?
<p id="num"></p>
<p id="num_1"></p>
$("#num").rollNumDaq({
deVal: 16888
});
$("#num_1").rollNumDaq({
deVal: 2478
});
//数字滚动
;(function($, window, document) {
"use strict";
var defaults = {
deVal: 0, //传入值
className:'dataNums', //样式名称
digit:'' //默认显示几位数字
};
function rollNumDaq(obj, options){
this.obj = obj;
this.options = $.extend(defaults, options);
this.init = function(){
this.initHtml(obj,defaults);
}
}
rollNumDaq.prototype = {
initHtml: function(obj,options){
var strHtml = '<ul class="' + options.className + ' inrow">';
var valLen = options.digit || (options.deVal + '').length;
if(obj.find('.'+options.className).length <= 0){
for(var i = 0; i< valLen; i++){
strHtml += '<li class="dataOne "><div class="dataBoc"><div class="tt" t="38"><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span></div></div></li>';
}
strHtml += '</ul>';
obj.html(strHtml);
}
this.scroNum(options);
},
scroNum: function(options){
var number = options.deVal;
var $num_item = $('.' + options.className).find('.tt');
var h = $('.dataBoc').height();
$num_item.css('transition','all 2s ease-in-out');
var numberStr = number.toString();
if(numberStr.length <= $num_item.length - 1){
var tempStr = '';
for(var a = 0; a < $num_item.length - numberStr.length; a++){
tempStr += '0';
}
numberStr = tempStr + numberStr;
}
var numberArr = numberStr.split('');
$num_item.each(function(i, item) {
setTimeout(function(){
$num_item.eq(i).css('top',-parseInt(numberArr[i])*h - h*10 + 'px');
},i*100)
});
}
}
$.fn.rollNumDaq = function(options){
var $that = this;
var rollNumObj = new rollNumDaq($that, options);
rollNumObj.init();
};
})(jQuery, window, document);
当第二个<p>引用这个插件,会影响到第一个<p>数字变为0.
附上插件来源 http://www.lanrenzhijia.com/j...
我看他rollNumDaq可以传obj,可我传进去$(this)反而显示的更异常了。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
调用的时候把样式名称 className,eg:
$("#num").rollNumDaq({
});