模拟了一个文字掉落的JS效果

稿源：互联网 2022-04-02 21:40:00 点击： 10949 撤稿纠错

如果无法出现效果，请刷新。。。

以下讨论的是和模拟文字掉落相关的模拟了一个文字掉落的JS效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
 <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.canvas{
    width:500px;
    height:500px;
    position:relative;
}
</style>
</head>
<body>
<div>
<input type="button" onclick="javascript:falling.init();" value="GO" />
</div>
<div class="canvas" id="canvas"></div>
<script type="text/javascript">
//http://mitworld.mit.edu/explorer
/*
*坠落效果
*/
function Falling(){
    this.dict=["abcd","2222","sign","next","container","content","last","break","less","than","that","absolute","relative","my","index","html","java","c#","web","javascript","php","include","shit","bull","big","smart","call","apply","callee","caller","function"];
    this.canvas=$("#canvas");
    this.step=15;
    this.freq=10;
    this.height=500;
    this.width=500;
    this.si=null;
}
Falling.prototype={
    fallingAction:function(dom){
        var self=this;
        var freqs=[10,15,20];//每次下落的距离
        var disS=[];//记录所有dom的当前距离
        var disPerFreqS=[];//每个dom的
        var targetDis=500;
        var domCssTopS=[];//所有dom的top属性
        var successDom=[];//记录哪些dom已经结束运动
        var successCount=0;//有多少个dom已经结束
        var total=dom.length;
        var freqMarkLength=freqs.length;
        for(var i=0,j=dom.length;i<j;i++){
            domCssTopS[i]=dom[i].position().top;
            disS[i]=0;
            disPerFreqS[i]=freqs[parseInt(Math.random()*freqMarkLength)];
        }
        self.si=setInterval(function(){
            if(successCount>=total){
                clearInterval(self.si);
            }
            for(var i=0,j=dom.length;i<j;i++){
                if(typeof(successDom[i])!="undefined" && successDom[i]=="ok"){
                    continue;
                }
                disS[i] += disPerFreqS[i];
                if(disS[i] >= targetDis){
                    dom[i].css("top", targetDis+domCssTopS[i]);
                    successDom[i]="ok";
                    successCount++;;
                }else{
                    dom[i].css("top", disS[i]+domCssTopS[i]);
                }
            }
        },self.freq);
    },
    init:function(){
        var self=this;
        self.canvas.html('');
        var dom=[];
        var l=0;
        var t=0;
        var tempDom=$("<div style='position;absolute;left:-100000;visibility:hidden'></div>").appendTo($("body"));
        for(var i=0,j=self.dict.length;i<j;i++){
            dom[i]=$("<span style='position:absolute'>"+self.dict[i]+"</span>").appendTo(tempDom);
            var domWidth=dom[i].width();
            var domHeight=dom[i].height();
            if(t<self.height){
                if(l<self.width){
                    if(domWidth+l<=self.width){
                        dom[i].css({"top":t,"left":l});
                        self.canvas.append(dom[i]);
                        l += dom[i].width();
                    }else{
                        if(domHeight+t<=self.height){
                            t=t+domHeight;
                            dom[i].css({"top":t,"left":0});
                            self.canvas.append(dom[i]);
                            l = dom[i].width();
                        }else{
                            break;//到极限了
                        }
                    }
                }else{
                        if(domHeight+t<=self.height){
                            t=t+domHeight;
                            l=0;
                            dom[i].css({"top":t,"left":l});
                            self.canvas.append(dom[i]);
                        }else{
                            break;//到极限了
                        }
                }
            }//else极限
        }
        /*
        for(var i=0,l=self.dict.length;i<l;i++){
            self.fallingAction(dom[i]);
        }
        */
        self.fallingAction(dom);
    }
}
var falling=new Falling();
falling.init();
</script>
</body>
</html>

关于模拟了一个文字掉落的JS效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011090873796.shtml方便下次再访问哦。

·上一篇： 仿谷歌个性首页拖拽效果
·下一篇： 鼠标移入及滑动移出时文字链接色彩产生渐变幻化的效果

模拟了一个文字掉落的JS效果

文章分类LIST >>返回首页

最新游戏

最新新闻