会跳高的字体插件jquery.beattext.js

插件描述：字体特效，会弹跳的字体插件jquery.beattext.js，兼容性如下：

使用方法

导入如下3个js文件：

 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="jquery.beattext.js"></script>
 <script type="text/javascript" src="easying.js"></script>

HTML 代码如下：

 <div class="container">
     <p id="beatText">我可是会跳的哦，但看我跳，你要把鼠标移上来。</p>
     <p id="rotateText">我是旋转字体的，你鼠标移上来看看</p>
     <br>
     <br>
     <p id="autoText">看我跳是不收钱的，免费看，上面两基佬都是鼠标移才动真懒</p>
     <p id="roloadText">正在加载中...</p>
     <br>
     <br>
     <p id="autoRotateText">我是刷杂技的，边跳边翻跟头..............</p>
 </div>

CSS样式如下：最后两个才是重要的：

 <style>
 *{
     padding:0px;
     margin:0px;
     background:#333;
     color:#fff;
     font-size:30px;
 }

 .container{
     margin:50px auto;
     width:1100px;
     position:relative;
 }
 .container p{
     text-align:center;
     padding:10px auto;
 }
 /*下面两个是核心样式*/
 .beat-char {
     line-height: 3.4em;
     position: relative;
     display: inline-block;
     background: transparent;

 }

 .rotate{
     transform:rotate(360deg) ;
     -ms-transform:rotate(360deg);  /* IE 9 */
     -moz-transform:rotate(360deg);     /* Firefox */
     -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
     -o-transform:rotate(360deg);
     -webkit-transition-duration: 0.7s;

 }
 </style>

调用方式如下：

 <script type="text/javascript">

 $(document).ready(function() {
 /*
  *  参数详解:
  * upTime          上移的时间
  * downTime        下落的时间
  * beatHeight      上移高度
  * isAuth          是否自动
  * isRotate        是否旋转
 */
 $('p#beatText').beatText({isAuth:false,isRotate:false});
 $('p#rotateText').beatText({isAuth:false,isRotate:true});
 $('p#autoText').beatText({isAuth:true,beatHeight:"3em",isRotate:false});
 $('p#roloadText').beatText({isAuth:true,beatHeight:"1em",isRotate:false,upTime:100,downTime:100});
 $('p#autoRotateText').beatText({isAuth:true,upTime:700,downTime:700,beatHeight:"3em",isRotate:true});

 });

 </script>

插件：easying.js源码：

 /*
  * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
  *
  * Uses the built in easing capabilities added In jQuery 1.1
  * to offer multiple easing options
  *
  * TERMS OF USE - jQuery Easing
  *
  * Open source under the BSD License.
  *
  * Copyright © 2008 George McGinley Smith
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without modification,
  * are permitted provided that the following conditions are met:
  *
  * Redistributions of source code must retain the above copyright notice, this list of
  * conditions and the following disclaimer.
  * Redistributions in binary form must reproduce the above copyright notice, this list
  * of conditions and the following disclaimer in the documentation and/or other materials
  * provided with the distribution.
  *
  * Neither the name of the author nor the names of contributors may be used to endorse
  * or promote products derived from this software without specific prior written permission.
  *
  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
  * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
  *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
  *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
  * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
  *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
  * OF THE POSSIBILITY OF SUCH DAMAGE.
  *
 */

 // t: current time, b: begInnIng value, c: change In value, d: duration
 jQuery.easing['jswing'] = jQuery.easing['swing'];

 jQuery.extend( jQuery.easing,
 {
     def: 'easeOutQuad',
     swing: function (x, t, b, c, d) {
         //alert(jQuery.easing.default);
         return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
     },
     easeInQuad: function (x, t, b, c, d) {
         return c*(t/=d)*t + b;
     },
     easeOutQuad: function (x, t, b, c, d) {
         return -c *(t/=d)*(t-2) + b;
     },
     easeInOutQuad: function (x, t, b, c, d) {
         if ((t/=d/2) < 1) return c/2*t*t + b;
         return -c/2 * ((--t)*(t-2) - 1) + b;
     },
     easeInCubic: function (x, t, b, c, d) {
         return c*(t/=d)*t*t + b;
     },
     easeOutCubic: function (x, t, b, c, d) {
         return c*((t=t/d-1)*t*t + 1) + b;
     },
     easeInOutCubic: function (x, t, b, c, d) {
         if ((t/=d/2) < 1) return c/2*t*t*t + b;
         return c/2*((t-=2)*t*t + 2) + b;
     },
     easeInQuart: function (x, t, b, c, d) {
         return c*(t/=d)*t*t*t + b;
     },
     easeOutQuart: function (x, t, b, c, d) {
         return -c * ((t=t/d-1)*t*t*t - 1) + b;
     },
     easeInOutQuart: function (x, t, b, c, d) {
         if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
         return -c/2 * ((t-=2)*t*t*t - 2) + b;
     },
     easeInQuint: function (x, t, b, c, d) {
         return c*(t/=d)*t*t*t*t + b;
     },
     easeOutQuint: function (x, t, b, c, d) {
         return c*((t=t/d-1)*t*t*t*t + 1) + b;
     },
     easeInOutQuint: function (x, t, b, c, d) {
         if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
         return c/2*((t-=2)*t*t*t*t + 2) + b;
     },
     easeInSine: function (x, t, b, c, d) {
         return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
     },
     easeOutSine: function (x, t, b, c, d) {
         return c * Math.sin(t/d * (Math.PI/2)) + b;
     },
     easeInOutSine: function (x, t, b, c, d) {
         return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
     },
     easeInExpo: function (x, t, b, c, d) {
         return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
     },
     easeOutExpo: function (x, t, b, c, d) {
         return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
     },
     easeInOutExpo: function (x, t, b, c, d) {
         if (t==0) return b;
         if (t==d) return b+c;
         if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
         return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
     },
     easeInCirc: function (x, t, b, c, d) {
         return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
     },
     easeOutCirc: function (x, t, b, c, d) {
         return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
     },
     easeInOutCirc: function (x, t, b, c, d) {
         if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
         return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
     },
     easeInElastic: function (x, t, b, c, d) {
         var s=1.70158;var p=0;var a=c;
         if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
         if (a < Math.abs(c)) { a=c; var s=p/4; }
         else var s = p/(2*Math.PI) * Math.asin (c/a);
         return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
     },
     easeOutElastic: function (x, t, b, c, d) {
         var s=1.70158;var p=0;var a=c;
         if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
         if (a < Math.abs(c)) { a=c; var s=p/4; }
         else var s = p/(2*Math.PI) * Math.asin (c/a);
         return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
     },
     easeInOutElastic: function (x, t, b, c, d) {
         var s=1.70158;var p=0;var a=c;
         if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
         if (a < Math.abs(c)) { a=c; var s=p/4; }
         else var s = p/(2*Math.PI) * Math.asin (c/a);
         if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
         return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
     },
     easeInBack: function (x, t, b, c, d, s) {
         if (s == undefined) s = 1.70158;
         return c*(t/=d)*t*((s+1)*t - s) + b;
     },
     easeOutBack: function (x, t, b, c, d, s) {
         if (s == undefined) s = 1.70158;
         return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
     },
     easeInOutBack: function (x, t, b, c, d, s) {
         if (s == undefined) s = 1.70158;
         if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
         return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
     },
     easeInBounce: function (x, t, b, c, d) {
         return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
     },
     easeOutBounce: function (x, t, b, c, d) {
         if ((t/=d) < (1/2.75)) {
             return c*(7.5625*t*t) + b;
         } else if (t < (2/2.75)) {
             return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
         } else if (t < (2.5/2.75)) {
             return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
         } else {
             return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
         }
     },
     easeInOutBounce: function (x, t, b, c, d) {
         if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
         return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
     }
 });

 /*
  *
  * TERMS OF USE - EASING EQUATIONS
  *
  * Open source under the BSD License.
  *
  * Copyright © 2001 Robert Penner
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without modification,
  * are permitted provided that the following conditions are met:
  *
  * Redistributions of source code must retain the above copyright notice, this list of
  * conditions and the following disclaimer.
  * Redistributions in binary form must reproduce the above copyright notice, this list
  * of conditions and the following disclaimer in the documentation and/or other materials
  * provided with the distribution.
  *
  * Neither the name of the author nor the names of contributors may be used to endorse
  * or promote products derived from this software without specific prior written permission.
  *
  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
  * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
  *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
  *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
  * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
  *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
  * OF THE POSSIBILITY OF SUCH DAMAGE.
  *
  */

插件jquery.beattext.js源码：

 /*
  * @auther     rstyro
  * @blog     http://www.lrshuai.top/blog
  * @Date     2017-11-14
  */

 (function($) {
     $.fn.beatText = function(options) {
         var defaults = {
             beatHeight: '2em',
             upTime: 700,
             downTime: 700,
             isAuth:true,
             isRotate:true
         };
         var options = $.extend(defaults, options);
         console.log(options);
         return this.each(function() {
             var obj = $(this);
             if (obj.text() !== obj.html()) {
                 return
             };
             var text = obj.text();
             var newMarkup = '';
             for (var i = 0; i <= text.length; i++) {
                 var character = text.slice(i, i + 1);
                 newMarkup += ($.trim(character)) ? '<span class="beat-char">' + character + '</span>' : character
             }
             obj.html(newMarkup);
             if(!options.isAuth){
                 obj.find('span.beat-char').each(function(index,el) {
                     $(this).mouseover(function() {
                         beatAnimate($(this),options);
                     })
                 })
             }else{
                 //自动跳动的动画
                 obj.find('span.beat-char:first').animate({
                     bottom: options.beatHeight
                 }, {
                     queue: false,
                     duration: options.upTime,
                     easing: 'easeOutCubic',
                     complete: function() {
                         $(this).animate({
                             bottom: 0
                         }, {
                             queue: false,
                             duration: options.downTime,
                             easing: 'easeOutBounce',
                             complete:function(){
                                 beatAnimate($(this).next(),options);
                             }
                         })
                     }
                 });
             }

         })
     }
     function beatAnimate(el,options){
         if(options.isRotate){
             el.addClass("rotate");
         }
         el.animate({
             bottom: options.beatHeight
         }, {
             queue: false,
             duration: options.upTime,
             easing: 'easeOutCubic',
             complete: function() {
                 el.removeClass("rotate");
                 $(this).animate({
                     bottom: 0
                 }, {
                     queue: false,
                     duration: options.downTime,
                     easing: 'easeOutBounce',
                     complete:function(){
                         if(options.isAuth){
                             var len = el.parent().children().length;
                             var indexNum = el.index();
                             if(indexNum == (len-1)){
                                 beatAnimate(el.parent().find('span.beat-char:first'),options);
                             }else{
                                 beatAnimate(el.next(),options);
                             }
                         }
                     }
                 })
             }
         })

     }

 })(jQuery);

实例：

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>自由跳动的字体</title>
 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
 <script type="text/javascript" src="jquery.beattext.js"></script>
 <script type="text/javascript" src="easying.js"></script>

 <script type="text/javascript">

 $(document).ready(function() {
 /*
  *  参数详解:
  *    upTime            上移的时间
  *    downTime        下落的时间
  *    beatHeight        上移高度
  *    isAuth            是否自动
  *    isRotate        是否旋转
 */
 $('p#beatText').beatText({isAuth:false,isRotate:false});
 $('p#rotateText').beatText({isAuth:false,isRotate:true});
 $('p#autoText').beatText({isAuth:true,beatHeight:"3em",isRotate:false});
 $('p#roloadText').beatText({isAuth:true,beatHeight:"1em",isRotate:false,upTime:100,downTime:100});
 $('p#autoRotateText').beatText({isAuth:true,upTime:700,downTime:700,beatHeight:"3em",isRotate:true});

 });

 </script>
 <style>
 *{
     padding:0px;
     margin:0px;
     background:#333;
     color:#fff;
     font-size:30px;
 }

 .container{
     margin:50px auto;
     width:1100px;
     position:relative;
 }
 .container p{
     text-align:center;
     padding:10px auto;
 }
 /*下面两个是核心样式*/
 .beat-char {
     line-height: 3.4em;
     position: relative;
     display: inline-block;
     background: transparent;

 }

 .rotate{
     transform:rotate(360deg) ;
     -ms-transform:rotate(360deg);     /* IE 9 */
     -moz-transform:rotate(360deg);     /* Firefox */
     -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
     -o-transform:rotate(360deg);
     -webkit-transition-duration: 0.7s;

 }
 </style>
 </head>
 <body>

 <div class="container">
     <p id="beatText">我可是会跳的哦，但看我跳，你要把鼠标移上来。</p>
     <p id="rotateText">我是旋转字体的，你鼠标移上来看看</p>
     <br>
     <br>
     <p id="autoText">看我跳是不收钱的，免费看，上面两基佬都是鼠标移才动真懒</p>
     <p id="roloadText">正在加载中...</p>
     <br>
     <br>
     <p id="autoRotateText">我是刷杂技的，边跳边翻跟头..............</p>
 </div>

 </body>
 </html>

插件代码已上传到博客园文件。

原文地址：http://www.jq22.com/jquery-info16903