用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>
最简单的动画:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$('#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");
今天抽时间搞了一下随机创建这些文字,还没让他们动起来。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>