main
liudan
2 years ago
parent
17d5cd70dc
commit
5e35fbb857
@ -1,209 +0,0 @@ |
|||||||
;(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