文字的跳动

Posted 2021-01-18 chenchenhao

今天做个文字跳动的效果

第一步：引入<script src=‘js/jquery.min.js‘></script>

第二步引入：<script src=‘js/easying.js‘></script>

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;
    }
});

第三步：引入<script src=‘js/jquery.beattext.js‘></script>

(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);

第四步：加入关键css代码

    /*下面两个是核心样式*/
        .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;
        }

第五步：js脚本写法

    $(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#loading‘).beatText({
                                    isAuth: true,
                                    beatHeight: "1em",
                                    isRotate: false,
                                    upTime: 100,
                                    downTime: 100
                                });
                                $(‘p#autoRotateText‘).beatText({
                                    isAuth: true,
                                    upTime: 700,
                                    downTime: 700,
                                    beatHeight: "3em",
                                    isRotate: true
                                });
                            })

第六步：查看html写法 下面id名与自己js配置的id相对应

<p id="loading">正在加载中...</p>