网页里比较炫的倒影动画

原创

dawn0919 2013-01-30 19:15:38 博主文章分类：数据库 ©著作权

©著作权归作者所有：来自51CTO博客作者dawn0919的原创作品，请联系作者获取转载授权，否则将追究法律责任

　　今天下午完成了一个比较好看的倒影效果，图片的轮动并且有倒影效果。
　　原理虽然简单，可JavaScript和CSS可真够折磨人啊！
    实现效果：
1、图片轮动，实时显示倒影；
2、鼠标移入静止放大图片，倒影也放大；
3、鼠标移出继续图片轮动。
　　下面是代码：

<html>
<head>
<title>带倒影的动画效果模拟</title>
<style type="text/css">
body           {text-align:center;
   topmargin:0;
   leftmargin:0;
   background:yellow;}

        #dawn0919      {position:relative;
   text-align:center;
   topmargin:0;
   leftmargin:0;
   red;
   width:1024;
   height:600;
   border:0;
   overflow:hidden;
   z-index:1;}

#dawn0718 {position:absolute;
    top:20;
    left:0;
    width:1024;
    height:300;
   blue;
   overflow:hidden;
   }

#dawn0401 {position:absolute;
    top:320;
    left:0;
    width:1024;
    height:300;
   background:green;
   overflow:hidden;
   }
img  {width:100%;
   height:100%;
   }

.TopSetOther   {position:relative;
   margin-left:9px;
   marginr-ight:9px;
   float:left;
   width:60px;
   height:40px;
   top:260px;
   }

.TopSetMid     {position:relative;
   margin-left:9px;
   marginr-ight:9px;
   float:left;
   width:400px;
   height:300px;
   top:0px;
   }

.BottomSetOther{position:relative;
   margin-left:9px;
   marginr-ight:9px;
   float:left;
   width:60px;
   height:40px;
   top:0px;
   filter:alpha(opacity=30) flipv();
   }
.BottomSetMid {position:relative;
   margin-left:9px;
   marginr-ight:9px;
   float:left;
   width:400px;
   height:300px;
   top:0px;
   filter:alpha(opacity=30) flipv();
   }

</style>

</head>

</div>
</body>
<script language=javascript type=text/javascript>

//blog.csdn.net/dawn0718
var ICurrentSpanID;
var IMainSpanID;

function Init(){
ICurrentSpanID=6;
IMainSpanID=5;
}

function SetID(ISPanID){
  StopSwith();
  ICurrentSpanID=ISPanID;
  SwitchID();
}

function SwitchID(){
  if (ICurrentSpanID!=IMainSpanID) {
   document.all["TopBlock"+ICurrentSpanID].style.width = 400;
   document.all["TopBlock"+ICurrentSpanID].style.height = 300;
   document.all["TopBlock"+ICurrentSpanID].style.pixelTop = 0;

   document.all["BottomBlock"+ICurrentSpanID].style.width = 400;
   document.all["BottomBlock"+ICurrentSpanID].style.height = 300;
   document.all["BottomBlock"+ICurrentSpanID].style.pixelTop = 0;

   if (ICurrentSpanID<5){
   }
   else
   {
    document.all["TopBlock"+ICurrentSpanID].style.pixelLeft = document.all["TopBlock"+ICurrentSpanID].style.offsetLeft - 400;
    document.all["BottomBlock"+ICurrentSpanID].style.pixelLeft = document.all["BottomBlock"+ICurrentSpanID].style.offsetLeft - 400;
   }

   document.all["TopBlock"+IMainSpanID].style.width = 60;
   document.all["TopBlock"+IMainSpanID].style.height = 40;
   document.all["TopBlock"+IMainSpanID].style.pixelTop = 260;

   document.all["BottomBlock"+IMainSpanID].style.width = 60;
   document.all["BottomBlock"+IMainSpanID].style.height = 40;
   document.all["BottomBlock"+IMainSpanID].style.pixelTop = 260;

   for (var i=1;i<10;i++){
    document.all["BottomBlock"+i].style.pixelTop = 0;
   }

   IMainSpanID=ICurrentSpanID;

   ICurrentSpanID=ICurrentSpanID+1;
   if (ICurrentSpanID>9){ICurrentSpanID=1;}

  }
}

function TimerStart(){ TimerID=window.setInterval(SwitchID,2000);}

function StopSwith(){
window.clearInterval(TimerID);
}

window.
Init();
TimerStart();
}

</script>
</html>

下面是效果图：