用JS实现简单的动画效果

本demo采用jQuery的animate()方法实现动画效果。在应用到项目中时根据需要修改a1-a9元素的定位值和尺寸,动画的图片元素切片应导出为透明模式。
 网友:要求地球从底下缓缓的升起,然后上面的建筑物从不同方向依次或者随机下落到地球上的动画 ,兼容IE8
JS实现简单的动画效果
JQ animate()方法实现简单的动画

需求分析

由于要兼容IE8,因此首选JQ动画效果(本来CSS3也可以实现)。
要实现这样的动画效果,我们首先想到的是animate()方法,然后结合CSS绝对定位的left和top属性可以实现需求。

切片导出

导出PSD里的动画原件素材,将切片导出为PNG透明格式;将图片以背景的形式写入对应的html元素里(此处的a1-a9)。

CSS代码

  1. #animateBox{position:relativewidth:800pxheight:350pxborder:1px solid #eeeoverflow:hidden}  
  2. #animateBox i{position:absolutewidth:100pxheight:100pxborder:1px solid #dddtext-align:centerline-height:100pxfont-style:normalbackground:#eee}  
  3. #animateBox i.a1{left:-120px; top:150px}  
  4. #animateBox i.a2{left:100px; top:100px}  
  5. #animateBox i.a3{left:150px; top:-102px}  
  6. #animateBox i.a4{left:200px; top:-102px}  
  7. #animateBox i.a5{left:450px; top:-102px}  
  8. #animateBox i.a6{left:500px; top:100px}  
  9. #animateBox i.a7{left:550px; top:-102px}  
  10. #animateBox i.a8{left:600px; top:-102px}  
  11. #animateBox i.a9{left:650px; top:-102px}  
  12. .earth{position:absolutewidth:500pxheight:500pxbackground:#ddd; top:100%; left:50%margin-left:-250px; border-top-left-radius:250px; border-top-right-radius:250px

HTML代码

  1. <div id="animateBox"> 
  2.     <i class="a a1">a1</i> 
  3.     <i class="a a2">a2</i> 
  4.     <i class="a a3">a3</i> 
  5.     <i class="a a4">a4</i> 
  6.     <i class="a a5">a5</i> 
  7.     <i class="a a6">a6</i> 
  8.     <i class="a a7">a7</i> 
  9.     <i class="a a8">a8</i> 
  10.     <i class="a a9">a9</i> 
  11.     <div class="a earth"></div> 
  12. </div> 

JS代码

  1. $(function(){  
  2.     var animateObj = [  
  3.         {  
  4.             class:'earth',  
  5.             left:50+'%',  
  6.             top:70+'%',  
  7.             delay:2000    
  8.         },  
  9.         {  
  10.             class:'a1',  
  11.             left:100,  
  12.             top:250 ,  
  13.             delay:1500  
  14.         },  
  15.         {  
  16.             class:'a2',  
  17.             left:150,  
  18.             top:220,  
  19.             delay:1000  
  20.         },  
  21.         {  
  22.             class:'a3',  
  23.             left:200,  
  24.             top:200,  
  25.             delay:1500  
  26.         },  
  27.         {  
  28.             class:'a4',  
  29.             left:250,  
  30.             top:180,  
  31.             delay:1800  
  32.         },  
  33.         {  
  34.             class:'a5',  
  35.             left:300,  
  36.             top:180,  
  37.             delay:1500  
  38.         },  
  39.         {  
  40.             class:'a6',  
  41.             left:400,  
  42.             top:150,  
  43.             delay:1500  
  44.         },  
  45.         {  
  46.             class:'a7',  
  47.             left:450,  
  48.             top:180,  
  49.             delay:1500  
  50.         },  
  51.         {  
  52.             class:'a8',  
  53.             left:500,  
  54.             top:180,  
  55.             delay:1500  
  56.         },  
  57.         {  
  58.             class:'a9',  
  59.             left:550,  
  60.             top:250,  
  61.             delay:1500  
  62.         }  
  63.     ]  
  64.     var $box = $('#animateBox'),  
  65.         aLen = animateObj.length;  
  66.     $box.find('.a').each(function(){  
  67.         for(var i = 0; i<aLen; i++){  
  68.             $box.find('.'+animateObj[i].class).animate({left:animateObj[i].left, top:animateObj[i].top},animateObj[i].delay);     
  69.         }  
  70.     })  
  71. }) 

 久久经验网 专注web技术解决,如你有前端技术疑问,欢迎加入我们一同解决!

参与讨论:http://www.yushanxx.com/thread-54-1-1.html

 

相关经验

导读书签
书签初始化中…