liudan
liudan
2 years ago
parent
e4b9af3473
commit
dd1ba5d482
@ -0,0 +1,209 @@ |
||||
;(function($, window, document, undefined) { |
||||
var leoTextAnimate = function(eles, opts) { |
||||
this.element = $(eles); |
||||
this.string = $(eles).html(); |
||||
this.defaults = { |
||||
speed: 2500, |
||||
autorun: true, |
||||
delay: 0, |
||||
fixed: '', |
||||
start: '' |
||||
}; |
||||
this.options = $.extend({}, this.defaults, opts); |
||||
this.height = $(eles).height(); |
||||
} |
||||
leoTextAnimate.prototype = { |
||||
init: function() { |
||||
if (this.element.find('.TextAnimate').length <= 0) { |
||||
var html = method.getHtml(this.options, this.string); |
||||
|
||||
console.log(html) |
||||
this.element.html(html); |
||||
} |
||||
this.reset(); |
||||
if (this.options.autorun) { |
||||
if (this.options.delay == 0) { |
||||
this.run(); |
||||
} else { |
||||
var $this = this; |
||||
setTimeout(function() { |
||||
$this.run(); |
||||
}, |
||||
this.options.delay); |
||||
} |
||||
} |
||||
}, |
||||
reload: function() { |
||||
if(this.options.text){ |
||||
this.string = this.options.text; |
||||
this.element.html(this.options.text); |
||||
} |
||||
this.init(); |
||||
}, |
||||
reset: function() { |
||||
var $this = this.element.find('.TextAnimate'); |
||||
$this.css({ |
||||
'overflow': 'hidden', |
||||
'display':'inline-block', |
||||
'vertical-align':'top', |
||||
'height': this.height |
||||
}).find("span").css({ |
||||
'display': 'inline-block', |
||||
'vertical-align': 'top', |
||||
'position': 'relative', |
||||
'top': '0px', |
||||
'transform': 'translateY(0px)', |
||||
'-ms-transform': 'translateY(0px)', |
||||
'-moz-transform': 'translateY(0px)', |
||||
'-webkit-transform': 'translateY(0px)', |
||||
'-o-transform': 'translateY(0px)', |
||||
'-ms-transition': '0s', |
||||
'-moz-transition': '0s', |
||||
'-webkit-transition': '0s', |
||||
'-o-transition': '0s', |
||||
'transition': '0s' |
||||
}).find("i").css({ |
||||
'display': 'block', |
||||
'font-style': 'normal', |
||||
'height': this.height |
||||
}); |
||||
}, |
||||
run: function() { |
||||
var speed = this.options.speed; |
||||
var height = this.height; |
||||
this.reset(); |
||||
this.element.find("span").each(function() { |
||||
var $this = $(this); |
||||
var length = $this.find('i').index($this.find('.on')); |
||||
var to = -length * height + 'px'; |
||||
if (to != $this.css("top")) { |
||||
if (!window.applicationCache) { |
||||
$this.animate({ |
||||
top: to |
||||
}, |
||||
speed); |
||||
} else { |
||||
$this.css({ |
||||
'transform': 'translateY(' + to + ')', |
||||
'-ms-transform': 'translateY(' + to + ')', |
||||
'-moz-transform': 'translateY(' + to + ')', |
||||
'-webkit-transform': 'translateY(' + to + ')', |
||||
'-o-transform': 'translateY(' + to + ')', |
||||
'-ms-transition': speed / 1000 + 's', |
||||
'-moz-transition': speed / 1000 + 's', |
||||
'-webkit-transition': speed / 1000 + 's', |
||||
'-o-transition': speed / 1000 + 's', |
||||
'transition': speed / 1000 + 's' |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
var method = { |
||||
getNumber: function(options, string) { |
||||
if(!this.inArr(options.fixed, string)) { |
||||
var text = '<span>'; |
||||
if (options.start !== '') { |
||||
text += '<i>' + options.start + '</i>'; |
||||
} |
||||
for (var i = 0; i < 10; i++) { |
||||
text += '<i' + (i == string ? ' class="on"': '') + '>' + i + '</i>'; |
||||
} |
||||
return text + '</span>'; |
||||
} else { |
||||
return '<span><i class="on">' + string + '</i></span>'; |
||||
} |
||||
}, |
||||
getLowerCase: function(options, string, code) { |
||||
if (!this.inArr(options.fixed, string)) { |
||||
var text = '<span>'; |
||||
if (options.start !== '') { |
||||
text += '<i>' + options.start + '</i>'; |
||||
} |
||||
for (var i = 0; i < 26; i++) { |
||||
text += '<i' + (97 + i == code ? ' class="on"': '') + '>' + String.fromCharCode(97 + i) + '</i>'; |
||||
} |
||||
return text + '</span>'; |
||||
} else { |
||||
return '<span><i class="on">' + string + '</i></span>'; |
||||
} |
||||
}, |
||||
getUpperCase: function(options, string, code) { |
||||
if (!this.inArr(options.fixed, string)) { |
||||
var text = '<span>'; |
||||
if (options.start !== '') { |
||||
text += '<i>' + options.start + '</i>'; |
||||
} |
||||
for (var i = 0; i < 26; i++) { |
||||
text += '<i' + (65 + i == code ? ' class="on"': '') + '>' + String.fromCharCode(65 + i) + '</i>'; |
||||
} |
||||
return text + '</span>'; |
||||
} else { |
||||
return '<span><i class="on">' + string + '</i></span>'; |
||||
} |
||||
}, |
||||
getUnicode: function(options, string, code) { |
||||
if (!this.inArr(options.fixed, string)) { |
||||
var text = '<span>'; |
||||
if (options.start !== '') { |
||||
text += '<i>' + options.start + '</i>'; |
||||
} |
||||
for (var i = (code - this.getRand(2, 7)); i < (code + this.getRand(3, 10)); i++) { |
||||
text += '<i' + (i == code ? ' class="on"': '') + '>' + String.fromCharCode(i) + '</i>'; |
||||
} |
||||
return text + '</span>'; |
||||
} else { |
||||
return '<span><i class="on">' + string + '</i></span>'; |
||||
} |
||||
}, |
||||
getHtml: function(options, string) { |
||||
var html = '<div class="TextAnimate">' |
||||
for (var i = 0; i < string.length; i++) { |
||||
var text = string.substr(i, 1); |
||||
var code = text.charCodeAt(); |
||||
if (code > 47 && code < 58) { |
||||
html += this.getNumber(options, text); |
||||
} else if (code > 64 && code < 91) { |
||||
html += this.getUpperCase(options, text, code); |
||||
} else if (code > 96 && code < 123) { |
||||
html += this.getLowerCase(options, text, code); |
||||
} else { |
||||
html += this.getUnicode(options, text, code); |
||||
} |
||||
} |
||||
return html + '</div>'; |
||||
}, |
||||
getRand: function(minnum, maxnum) { |
||||
return Math.floor(minnum + Math.random() * (maxnum - minnum)); |
||||
}, |
||||
inArr: function(arr,str){ |
||||
for(var i=0;i<arr.length;i++){ |
||||
if(arr[i].indexOf(str)!==-1){ |
||||
return true; |
||||
} |
||||
} |
||||
return false; |
||||
} |
||||
} |
||||
$.fn.leoTextAnimate = function(options,options2) { |
||||
$(this).each(function(){ |
||||
var plugin = $._data(this, "leoTextAnimate"); |
||||
if(options2){ |
||||
var opts = $.extend(true, {}, $.fn.leoTextAnimate.defaults, typeof options2 === "object" ? options2 : {}); |
||||
} else { |
||||
var opts = $.extend(true, {}, $.fn.leoTextAnimate.defaults, typeof options === "object" ? options : {}); |
||||
} |
||||
plugin = new leoTextAnimate(this, opts); |
||||
$._data(this, "leoTextAnimate", plugin); |
||||
if (plugin[options]) { |
||||
return plugin[options].apply(plugin, Array.prototype.slice.call(arguments, 1)); |
||||
} else if (typeof options === 'object' || !options) { |
||||
return plugin.init(); |
||||
} else { |
||||
$.error('Method ' + options + ' does not exist on jQuery.leoTextAnimate'); |
||||
} |
||||
return this; |
||||
}); |
||||
}; |
||||
})(jQuery, window, document); |
||||
Loading…
Reference in new issue