插件描述：字体特效，会弹跳的字体插件jquery.beattext.js，兼容性如下：
使用方法
导入如下3个js文件：
1 <script type="text/javascript" src="jquery.min.js"></script> 2 <script type="text/javascript" src="jquery.beattext.js"></script> 3 <script type="text/javascript" src="easying.js"></script>
HTML 代码如下：
1 <div class="container"> 2 <p id="beatText">我可是会跳的哦，但看我跳，你要把鼠标移上来。</p> 3 <p id="rotateText">我是旋转字体的，你鼠标移上来看看</p> 4 <br> 5 <br> 6 <p id="autoText">看我跳是不收钱的，免费看，上面两基佬都是鼠标移才动真懒</p> 7 <p id="roloadText">正在加载中...</p> 8 <br> 9 <br> 10 <p id="autoRotateText">我是刷杂技的，边跳边翻跟头..............</p> 11 </div>
CSS样式如下：最后两个才是重要的：
1 <style> 2 *{ 3 padding:0px; 4 margin:0px; 5 background:#333; 6 color:#fff; 7 font-size:30px; 8 } 9 10 .container{ 11 margin:50px auto; 12 width:1100px; 13 position:relative; 14 } 15 .container p{ 16 text-align:center; 17 padding:10px auto; 18 } 19 /*下面两个是核心样式*/ 20 .beat-char { 21 line-height: 3.4em; 22 position: relative; 23 display: inline-block; 24 background: transparent; 25 26 } 27 28 .rotate{ 29 transform:rotate(360deg) ; 30 -ms-transform:rotate(360deg); /* IE 9 */ 31 -moz-transform:rotate(360deg); /* Firefox */ 32 -webkit-transform:rotate(360deg); /* Safari 和 Chrome */ 33 -o-transform:rotate(360deg); 34 -webkit-transition-duration: 0.7s; 35 36 } 37 </style>
调用方式如下：
1 <script type="text/javascript"> 2 3 $(document).ready(function() { 4 /* 5 * 参数详解: 6 * upTime 上移的时间 7 * downTime 下落的时间 8 * beatHeight 上移高度 9 * isAuth 是否自动 10 * isRotate 是否旋转 11 */ 12 $('p#beatText').beatText({isAuth:false,isRotate:false}); 13 $('p#rotateText').beatText({isAuth:false,isRotate:true}); 14 $('p#autoText').beatText({isAuth:true,beatHeight:"3em",isRotate:false}); 15 $('p#roloadText').beatText({isAuth:true,beatHeight:"1em",isRotate:false,upTime:100,downTime:100}); 16 $('p#autoRotateText').beatText({isAuth:true,upTime:700,downTime:700,beatHeight:"3em",isRotate:true}); 17 18 }); 19 20 </script>
插件：easying.js源码：
1 /* 2 * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ 3 * 4 * Uses the built in easing capabilities added In jQuery 1.1 5 * to offer multiple easing options 6 * 7 * TERMS OF USE - jQuery Easing 8 * 9 * Open source under the BSD License. 10 * 11 * Copyright © 2008 George McGinley Smith 12 * All rights reserved. 13 * 14 * Redistribution and use in source and binary forms, with or without modification, 15 * are permitted provided that the following conditions are met: 16 * 17 * Redistributions of source code must retain the above copyright notice, this list of 18 * conditions and the following disclaimer. 19 * Redistributions in binary form must reproduce the above copyright notice, this list 20 * of conditions and the following disclaimer in the documentation and/or other materials 21 * provided with the distribution. 22 * 23 * Neither the name of the author nor the names of contributors may be used to endorse 24 * or promote products derived from this software without specific prior written permission. 25 * 26 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 27 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 28 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE 29 * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 30 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE 31 * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 32 * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 33 * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 34 * OF THE POSSIBILITY OF SUCH DAMAGE. 35 * 36 */ 37 38 // t: current time, b: begInnIng value, c: change In value, d: duration 39 jQuery.easing['jswing'] = jQuery.easing['swing']; 40 41 jQuery.extend( jQuery.easing, 42 { 43 def: 'easeOutQuad', 44 swing: function (x, t, b, c, d) { 45 //alert(jQuery.easing.default); 46 return jQuery.easing[jQuery.easing.def](x, t, b, c, d); 47 }, 48 easeInQuad: function (x, t, b, c, d) { 49 return c*(t/=d)*t + b; 50 }, 51 easeOutQuad: function (x, t, b, c, d) { 52 return -c *(t/=d)*(t-2) + b; 53 }, 54 easeInOutQuad: function (x, t, b, c, d) { 55 if ((t/=d/2) < 1) return c/2*t*t + b; 56 return -c/2 * ((--t)*(t-2) - 1) + b; 57 }, 58 easeInCubic: function (x, t, b, c, d) { 59 return c*(t/=d)*t*t + b; 60 }, 61 easeOutCubic: function (x, t, b, c, d) { 62 return c*((t=t/d-1)*t*t + 1) + b; 63 }, 64 easeInOutCubic: function (x, t, b, c, d) { 65 if ((t/=d/2) < 1) return c/2*t*t*t + b; 66 return c/2*((t-=2)*t*t + 2) + b; 67 }, 68 easeInQuart: function (x, t, b, c, d) { 69 return c*(t/=d)*t*t*t + b; 70 }, 71 easeOutQuart: function (x, t, b, c, d) { 72 return -c * ((t=t/d-1)*t*t*t - 1) + b; 73 }, 74 easeInOutQuart: function (x, t, b, c, d) { 75 if ((t/=d/2) < 1) return c/2*t*t*t*t + b; 76 return -c/2 * ((t-=2)*t*t*t - 2) + b; 77 }, 78 easeInQuint: function (x, t, b, c, d) { 79 return c*(t/=d)*t*t*t*t + b; 80 }, 81 easeOutQuint: function (x, t, b, c, d) { 82 return c*((t=t/d-1)*t*t*t*t + 1) + b; 83 }, 84 easeInOutQuint: function (x, t, b, c, d) { 85 if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; 86 return c/2*((t-=2)*t*t*t*t + 2) + b; 87 }, 88 easeInSine: function (x, t, b, c, d) { 89 return -c * Math.cos(t/d * (Math.PI/2)) + c + b; 90 }, 91 easeOutSine: function (x, t, b, c, d) { 92 return c * Math.sin(t/d * (Math.PI/2)) + b; 93 }, 94 easeInOutSine: function (x, t, b, c, d) { 95 return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; 96 }, 97 easeInExpo: function (x, t, b, c, d) { 98 return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 99 }, 100 easeOutExpo: function (x, t, b, c, d) { 101 return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 102 }, 103 easeInOutExpo: function (x, t, b, c, d) { 104 if (t==0) return b; 105 if (t==d) return b+c; 106 if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 107 return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 108 }, 109 easeInCirc: function (x, t, b, c, d) { 110 return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; 111 }, 112 easeOutCirc: function (x, t, b, c, d) { 113 return c * Math.sqrt(1 - (t=t/d-1)*t) + b; 114 }, 115 easeInOutCirc: function (x, t, b, c, d) { 116 if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; 117 return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; 118 }, 119 easeInElastic: function (x, t, b, c, d) { 120 var s=1.70158;var p=0;var a=c; 121 if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 122 if (a < Math.abs(c)) { a=c; var s=p/4; } 123 else var s = p/(2*Math.PI) * Math.asin (c/a); 124 return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 125 }, 126 easeOutElastic: function (x, t, b, c, d) { 127 var s=1.70158;var p=0;var a=c; 128 if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 129 if (a < Math.abs(c)) { a=c; var s=p/4; } 130 else var s = p/(2*Math.PI) * Math.asin (c/a); 131 return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 132 }, 133 easeInOutElastic: function (x, t, b, c, d) { 134 var s=1.70158;var p=0;var a=c; 135 if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); 136 if (a < Math.abs(c)) { a=c; var s=p/4; } 137 else var s = p/(2*Math.PI) * Math.asin (c/a); 138 if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 139 return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; 140 }, 141 easeInBack: function (x, t, b, c, d, s) { 142 if (s == undefined) s = 1.70158; 143 return c*(t/=d)*t*((s+1)*t - s) + b; 144 }, 145 easeOutBack: function (x, t, b, c, d, s) { 146 if (s == undefined) s = 1.70158; 147 return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 148 }, 149 easeInOutBack: function (x, t, b, c, d, s) { 150 if (s == undefined) s = 1.70158; 151 if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 152 return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 153 }, 154 easeInBounce: function (x, t, b, c, d) { 155 return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; 156 }, 157 easeOutBounce: function (x, t, b, c, d) { 158 if ((t/=d) < (1/2.75)) { 159 return c*(7.5625*t*t) + b; 160 } else if (t < (2/2.75)) { 161 return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 162 } else if (t < (2.5/2.75)) { 163 return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 164 } else { 165 return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 166 } 167 }, 168 easeInOutBounce: function (x, t, b, c, d) { 169 if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; 170 return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; 171 } 172 }); 173 174 /* 175 * 176 * TERMS OF USE - EASING EQUATIONS 177 * 178 * Open source under the BSD License. 179 * 180 * Copyright © 2001 Robert Penner 181 * All rights reserved. 182 * 183 * Redistribution and use in source and binary forms, with or without modification, 184 * are permitted provided that the following conditions are met: 185 * 186 * Redistributions of source code must retain the above copyright notice, this list of 187 * conditions and the following disclaimer. 188 * Redistributions in binary form must reproduce the above copyright notice, this list 189 * of conditions and the following disclaimer in the documentation and/or other materials 190 * provided with the distribution. 191 * 192 * Neither the name of the author nor the names of contributors may be used to endorse 193 * or promote products derived from this software without specific prior written permission. 194 * 195 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 196 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 197 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE 198 * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 199 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE 200 * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 201 * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 202 * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 203 * OF THE POSSIBILITY OF SUCH DAMAGE. 204 * 205 */
插件jquery.beattext.js源码：
1 /* 2 * @auther rstyro 3 * @blog http://www.lrshuai.top/blog 4 * @Date 2017-11-14 5 */ 6 7 (function($) { 8 $.fn.beatText = function(options) { 9 var defaults = { 10 beatHeight: '2em', 11 upTime: 700, 12 downTime: 700, 13 isAuth:true, 14 isRotate:true 15 }; 16 var options = $.extend(defaults, options); 17 console.log(options); 18 return this.each(function() { 19 var obj = $(this); 20 if (obj.text() !== obj.html()) { 21 return 22 }; 23 var text = obj.text(); 24 var newMarkup = ''; 25 for (var i = 0; i <= text.length; i++) { 26 var character = text.slice(i, i + 1); 27 newMarkup += ($.trim(character)) ? '<span class="beat-char">' + character + '</span>' : character 28 } 29 obj.html(newMarkup); 30 if(!options.isAuth){ 31 obj.find('span.beat-char').each(function(index,el) { 32 $(this).mouseover(function() { 33 beatAnimate($(this),options); 34 }) 35 }) 36 }else{ 37 //自动跳动的动画 38 obj.find('span.beat-char:first').animate({ 39 bottom: options.beatHeight 40 }, { 41 queue: false, 42 duration: options.upTime, 43 easing: 'easeOutCubic', 44 complete: function() { 45 $(this).animate({ 46 bottom: 0 47 }, { 48 queue: false, 49 duration: options.downTime, 50 easing: 'easeOutBounce', 51 complete:function(){ 52 beatAnimate($(this).next(),options); 53 } 54 }) 55 } 56 }); 57 } 58 59 }) 60 } 61 function beatAnimate(el,options){ 62 if(options.isRotate){ 63 el.addClass("rotate"); 64 } 65 el.animate({ 66 bottom: options.beatHeight 67 }, { 68 queue: false, 69 duration: options.upTime, 70 easing: 'easeOutCubic', 71 complete: function() { 72 el.removeClass("rotate"); 73 $(this).animate({ 74 bottom: 0 75 }, { 76 queue: false, 77 duration: options.downTime, 78 easing: 'easeOutBounce', 79 complete:function(){ 80 if(options.isAuth){ 81 var len = el.parent().children().length; 82 var indexNum = el.index(); 83 if(indexNum == (len-1)){ 84 beatAnimate(el.parent().find('span.beat-char:first'),options); 85 }else{ 86 beatAnimate(el.next(),options); 87 } 88 } 89 } 90 }) 91 } 92 }) 93 94 95 } 96 97 })(jQuery);
实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>自由跳动的字体</title> 6 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 7 <script type="text/javascript" src="jquery.beattext.js"></script> 8 <script type="text/javascript" src="easying.js"></script> 9 10 <script type="text/javascript"> 11 12 $(document).ready(function() { 13 /* 14 * 参数详解: 15 * upTime 上移的时间 16 * downTime 下落的时间 17 * beatHeight 上移高度 18 * isAuth 是否自动 19 * isRotate 是否旋转 20 */ 21 $('p#beatText').beatText({isAuth:false,isRotate:false}); 22 $('p#rotateText').beatText({isAuth:false,isRotate:true}); 23 $('p#autoText').beatText({isAuth:true,beatHeight:"3em",isRotate:false}); 24 $('p#roloadText').beatText({isAuth:true,beatHeight:"1em",isRotate:false,upTime:100,downTime:100}); 25 $('p#autoRotateText').beatText({isAuth:true,upTime:700,downTime:700,beatHeight:"3em",isRotate:true}); 26 27 }); 28 29 </script> 30 <style> 31 *{ 32 padding:0px; 33 margin:0px; 34 background:#333; 35 color:#fff; 36 font-size:30px; 37 } 38 39 .container{ 40 margin:50px auto; 41 width:1100px; 42 position:relative; 43 } 44 .container p{ 45 text-align:center; 46 padding:10px auto; 47 } 48 /*下面两个是核心样式*/ 49 .beat-char { 50 line-height: 3.4em; 51 position: relative; 52 display: inline-block; 53 background: transparent; 54 55 } 56 57 .rotate{ 58 transform:rotate(360deg) ; 59 -ms-transform:rotate(360deg); /* IE 9 */ 60 -moz-transform:rotate(360deg); /* Firefox */ 61 -webkit-transform:rotate(360deg); /* Safari 和 Chrome */ 62 -o-transform:rotate(360deg); 63 -webkit-transition-duration: 0.7s; 64 65 } 66 </style> 67 </head> 68 <body> 69 70 <div class="container"> 71 <p id="beatText">我可是会跳的哦，但看我跳，你要把鼠标移上来。</p> 72 <p id="rotateText">我是旋转字体的，你鼠标移上来看看</p> 73 <br> 74 <br> 75 <p id="autoText">看我跳是不收钱的，免费看，上面两基佬都是鼠标移才动真懒</p> 76 <p id="roloadText">正在加载中...</p> 77 <br> 78 <br> 79 <p id="autoRotateText">我是刷杂技的，边跳边翻跟头..............</p> 80 </div> 81 82 </body> 83 </html>
插件代码已上传到博客园文件。