animate基础

用JQUERY做动画是很方便的，已经看过大牛们做出不逊色于FLASH的各种效果。

其中的基本功就有animate这个方法的使用。于是，从零开始，训练基本功：

<body>
<div class="wrapper" style="500px; height:500px; display:block; margin:0 auto; background:#FFC; position:relative;">
<div id="txt1">从零开始</div>
<div id="txt2">掌握基础</div>
<div id="txt3">不卑不亢</div>
</div>
<script>
最简单的动画：

$('#txt1').css({position:"absolute",opacity:"0",filter:"alpha(opacity=0)",left:"15px",top:"10px"}); 
$('#txt2').css({position:"absolute",opacity:"0",filter:"alpha(opacity=0)",left:"25px",top:"40px"});
$('#txt3').css({position:"absolute",opacity:"0",filter:"alpha(opacity=0)",left:"50px",top:"80px"});
$('#txt1').animate({left:0+'px',opacity:1}, 500,"swing");
$('#txt2').delay(200).animate({left:25+'px',opacity:1}, 500,"swing");
$('#txt3').delay(500).animate({left:50+'px',opacity:1}, 500,"swing");
$('#txt1').delay(750).animate({left:100+'px',opacity:1}, 500,"swing");
$('#txt2').delay(1000).animate({left:125+'px',opacity:1}, 500,"swing");
$('#txt3').delay(1200).animate({left:150+'px',opacity:1}, 500,"swing");
$('#txt1').delay(1400).animate({left:100+'px',top:100+'px',opacity:1}, 500,"swing");
$('#txt2').delay(1600).animate({left:125+'px',top:200+'px',opacity:1}, 500,"swing");
$('#txt3').delay(1800).animate({left:150+'px',top:300+'px',opacity:1}, 500,"swing");

淡入移动

今天抽时间搞了一下随机创建这些文字，还没让他们动起来。

        var leafArr=["第一段","第二段","第三段"];
        var leafImgArr=[];
        var innerwrap=document.createElement("div");
            innerwrap.style.position="relative";
            innerwrap.style.display="block";
            innerwrap.id="innerwrap";
            innerwrap.style.left="50%";
            innerwrap.style.top="50%";
        document.getElementById("wrapper").appendChild(innerwrap);    
        for(var i=0;i<15;i++){
            var txt=document.createElement("div");            
            txt.style.position="absolute";
            //alert(getNum(Math.random()*500));
            txt.style.top=getNum(Math.random()*200)+"px";
            txt.style.left=getNum(Math.random()*200)+"px";
            txt.id="txt"+i;
            txt.innerHTML=leafArr[Math.floor(Math.random()*leafArr.length)];
            leafImgArr.push(txt.id);
            document.getElementById("innerwrap").appendChild(txt);
        }
        
    //    floor：返回小于等于其数值参数的最大整数。  %modulo ：取余，左边的除以右边的只取余数
        
        
//自定义方法随机得到正整数或者负整数的！

        function getNum(num){
            if(Math.floor(Math.random()*10000)%2==0){
                return num;
            }else{
                return -num;//没有负数就会很容易重叠，但是有了负数，绝对定位的时候就会超出  父容器
            }
        }

随机分布的文字

</script>

</body>