会跳高的字体插件jquery.beattext.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>

 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>

 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>

 ?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 EQUATIONS177 ?* 178 ?* Open source under the BSD License. 179 ?* 180 ?* Copyright ? 2001 Robert Penner181 ?* 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 OF197 ?* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE198 ?* ?COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,199 ?* ?EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE200 ?* ?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 (INCLUDING202 ?* ?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 ?*/

 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:true15 ????????};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 ????????????????return22 ????????????};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>‘ : character28 ????????????}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.beatHeight40 ????????????????}, {41 ????????????????????queue: false,42 ????????????????????duration: options.upTime,43 ????????????????????easing: ‘easeOutCubic‘,44 ????????????????????complete: function() {45 ????????????????????????$(this).animate({46 ????????????????????????????bottom: 047 ????????????????????????}, {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.beatHeight67 ????????}, {68 ????????????queue: false,69 ????????????duration: options.upTime,70 ????????????easing: ‘easeOutCubic‘,71 ????????????complete: function() {72 ????????????????el.removeClass("rotate");73 ????????????????$(this).animate({74 ????????????????????bottom: 075 ????????????????}, {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>