js demo--页面字母飞行特效-优快云博客

本文介绍了一个使用jQuery实现的飞字效果插件，该插件能够自定义字母飞行路径、颜色等参数，通过调整配置可以轻松地在网页上展示动态的字母飞行动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考了“前端攻城师july”的一个小demo

定义defaults变量如下：

letters : ['1','2','3','4'],
letterMaxSize: Array(100,100),
bright: Array( 0.4 , 1 ),
letterFlyTime:12000, // 飞行时间
makeLetterInterval:2000, //制造letter的时间
makeLetterNum: 1 //每次产生多少个letter

其实这里还可以定义多其他的属性

　　//扩展jq.easing
    $.extend(jQuery.easing,{
        starFly:function(x,t,b,c,d){
            return c*(t/=d)*t*t*t+b; 
        }
    });
　　
    $.fn.flyingLetter=function(option){
        //console.log("gaga");
        var $obj = $(this);
        var opts = $.extend({},$.fn.flyingLetter.defaults,option);
        var viewSize,maxWidth,maxHeight;
        checkSize();

        $(window).resize(function(e){
            checkSize(); 
        }).scroll(function(e){
            checkSize(); 
        });
        
        fly();
        setInterval(function(){
            fly(); 
        },opts.makeLetterInterval);
        return $obj; 
        
        function checkSize(){
            viewSize = getViewSize();
            maxWidth = viewSize[0];
            maxHeight = viewSize[1];
           // console.log("maxWidth maxHeight"+maxWidth+","+maxHeight);
        };
        
        function fly(){
            var html = '',xpos,rotate,rotateStyle;
            //console.log("fly"); 
            for(var i=0;i<opts.makeLetterNum;i++){
                xpos = [-opts.letterMaxSize[1],maxWidth-opts.letterMaxSize[1]-20]; 
                rotate = rand(0,359); 
                rotateStyle = '-moz-transform:rotate('+rotate+'deg); -webkit-transform:rotate('+rotate+'deg); -o-transform:rotate('+rotate+'deg); transform:rotate('+rotate+'deg)';
                html+='<b class="flyingLetter" status="start" xpos="'+xpos.join(',')+'" style="left:'+(maxWidth*0.5)+'px;top:'+(maxHeight*0.35)+'px;'+rotateStyle+';position:fixed;width:1px;height:1px;font-size:3px;line-height:120%;color:#FFF;z-index:0;-webkit-text-size-adjust:none;">'+randoms(1,opts.letters)+'</b>';
            }
            console.log("html="+html);
            $obj.append(html).find("b[status=start]").each(function(){
                var $this = $(this); 
                var html = null;
                xpos = $this.attr('xpos').split(',');
                $this.attr('status','run').css({color:'#'+randoms(6,'0123456789ABCDEF'),opacity:rand(opts.bright[0]*10,opts.bright[1]*10)*0.1})
                .animate({
                    left:xpos[rand(0,1)],
                    top:rand(-Math.max(200,maxHeight*0.2),maxHeight-10),
                    fontSize:rand(opts.letterMaxSize[0]/4,opts.letterMaxSize[1])+'px'
                },rand(opts.letterFlyTime*0.5,opts.letterFlyTime*4),'starFly',function(){
                    $this.remove(); 
                });
            });
        }
            function randoms(length,chars){
                var length = length || 1;
                var chars  = chars || '012345689abcdefghijklmnopqrstuvwxyz';
                var hash = ''; 
                var maxNum = chars.length-1;
                var num = 0 ;
                for(var i=0;i<length;i++){
                 //   num = rand(0,maxNum-1); 
                  //  hash+=chars.slice(num,num+1);
                   hash+=chars[rand(0,maxNum-1)]; 
                }
                return hash;
            }
    };

转载于:https://www.cnblogs.com/lgmcolin/archive/2013/01/29/2881764.html