前端练习1-月全食效果

此次月全食效果原理：

     用一组月全食的图片，让图片在x周上移动，从而做出月全食的效果。

<! DOCTYPE  html  PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >

< html  xmlns =  "http://www.w3.org/1999/xhtml"  >

< head >

< meta  http-equiv =  "content-type"  content  = "text/html; charset=utf-8"  />

< title >  2011-06-16月全食 </ title  >

< style  type =  "text/css" >

     .moon  { background :  url("images/strip.jpg") 0 0px no-repeat ; height :  112px ; width :  112px ; overflow  : hidden ; display : block ;}

     .moon_scroll  {  height :  200px ;  width :  500px ; overflow  : auto ; display : none ;}

</ style >

</ head >

< body >

< div  class =  "moon"  id  = "moon" ></  div >

< div  class =  "moon_scroll"  id  = "moon_scroll"  >

< img  src =  "http://mat1.gtimg.com/hb/sucai/eclipse/spacer.jpg"  style ="  height :  1px ;  width :  1670px ;  display :  block ;"  />  <!--(13104 / 112) * 10 + 500-->

</ div >

< div  id =  "scrollLeft" ></ div  >

< script  type =  "text/javascript" >

( function (){

     var  w = 13104;  /*照片总长度*/

    var  step = parseInt(w / 112,10); /*小图片总数*/

     var  method =  new  Object();

    method.index = 0;

    method.running =  function (){

         if  (method.index >= step) {document.getElementById( 'moon_scroll'  ).style.display =  'block' ; return ;} /*如果当前走过的照片数大于等于总照片数，则显示为块级元素*/

        document.getElementById( 'moon'  ).style.backgroundPosition =  '-'  + (112 * method.index) +  'px 0' ;

        method.index++;

        setTimeout(method.running,100);  /*每个100毫秒运行一次method.running*/

    }

    

    method.running();

})();

( function (){

    document.getElementById(  'moon_scroll' ).onscroll =  function  () {

         var  left = Math.round(( this .scrollLeft) / 10);

        left = Math.min(13104/112-1,left);left = Math.max(0,left);

        document.getElementById( 'moon'  ).style.backgroundPosition =  '-'  + left*112 +  'px 0  '

        document.getElementById(  'scrollLeft' ).innerHTML = left;

    }

})();

</ script >

</ body >

</ html >

   

运行结果：

 （1）运行过程中：

   

 （2）运行结束后：

  

当点击左右的箭头时，滚动条会随之滑动，并且图片也会随之移动。

其中，图片strip.jpg为：