很酷的文字从高处抛下html特效

2013-10-10 01:15:32 -0400

<!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:300px;
    height:300px;
    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=["唯酷智能网","精彩","一直","在您","身边","！","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=300;
    this.si=null;
}
Falling.prototype={
    fallingAction:function(dom){
        var self=this;
        var freqs=[5,10,15];//每次下落的距离
        var disS=[];//记录所有dom的当前距离
        var disPerFreqS=[];//每个dom的
        var targetDis=170;
        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>

点击上面选择框全选代码
-以下为代码演示

«Newer Older»

----Comments(1)----
csngmap (@csngmap) | @ at 2013-10-10 02:52:
不错！谢谢分享

Back to home

Subscribe | Register | Login | N